javascript - 如何将 JSON 数组添加到无限数量的选项菜单中？

Question

对于 WebInterface，我需要使用 JavaScript 将 JSON 数组添加到无限量的选项菜单中。我对使用 JavaScript 进行编程还是个新手，我想你可以帮助我。

我找到了一个将 JSON 数组添加到选项菜单的解决方案，该解决方案有效，因此我尝试添加一些代码以使其适用于无限数量的选项菜单。

我有两个选择标签:

<select id="selection1" class="selectionMenu"> </select>
<select id="selection2" class="selectionMenu"> </select>

以下代码是我编写的用于将选项标签添加到两个对我不起作用的选择菜单的脚本。

<script>

 var arr = [
  'selection1',
  'selection2'
 ]

 var arrLen = arr.length - 1;

 for (j = 0; j < arrLen; j++) {

  var arrElm = arr[j];

  var select = doucment.getElementById(arrElm);

  var text = '{"nrrps":[' +
   '{"dbC":"PI1","PIIP":"192.168.2.17" },' +
   '{"dbC":"PI2","PIIP":"192.168.2.18" },' + 
   '{"dbC":"PI3","PIIP":"192.168.2.19" }]}';

  for (i=0; i < text.length; i++;) {

   var opt = document.createElement('option');

   var counter2 = i + 1;

   obj = JSON.parse(text);

   var insertText = obj.nrrps[i].dbC + " " + obj.nrrps[i].PIIP + " ";

   var optVal = obj.nrrps[i].dbC;

   opt.value = optVal;

   opt.innerHTML = insertText;

   opt.setAttribute("class", "sOption");

   select.appendChild(opt);

  }

 }

</script>

当我运行代码时，JSON 数组被插入到第一个选择标记中，但没有插入到第二个选择标记中。我不知道为什么。另外是否有可能在选择选项后获取每个选择标签的值？

我希望你能帮我解决这个问题。

提前致谢!

Answer 1

1st :首先@kamesh 提到你已经applied -1在长度上更改运算符如下 j <= arrLen;

for (j = 0; j <= arrLen; j++) { ... }

第二名:第二名for loop您的检查length对于文本，它会给出文本长度 122 something .这是错误的，所以你需要申请JSON.parse()然后找到如下选项的长度

var obj = JSON.parse(text);

for (i=0; i < obj.nrrps.length; i++) {...}

var arr = [
	  'selection1',
	  'selection2'
	 ]

 var arrLen = arr.length - 1;

 for (j = 0; j <= arrLen; j++) {

  var arrElm = arr[j];

  var select = document.getElementById(arrElm);

  var text = '{"nrrps":[' +
			   '{"dbC":"PI1","PIIP":"192.168.2.17" },' +
			   '{"dbC":"PI2","PIIP":"192.168.2.18" },' + 
			   '{"dbC":"PI3","PIIP":"192.168.2.19" }]}';
  
  //console.log(text.length);
  
  var obj = JSON.parse(text);
  
  for (i=0; i < obj.nrrps.length; i++) {

   var opt = document.createElement('option');

   var counter2 = i + 1;

   var insertText = obj.nrrps[i].dbC + " " + obj.nrrps[i].PIIP + " ";

   var optVal = obj.nrrps[i].dbC;

   opt.value = optVal;

   opt.innerHTML = insertText;

   opt.setAttribute("class", "sOption");

   select.appendChild(opt);

  }

 }

<select id="selection1" class="selectionMenu"> </select>
<select id="selection2" class="selectionMenu"> </select>