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

您已经从数组长度中减去了一个。所以运行你的for循环直到＆lt; = array.length。

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

  var arrElm = arr[j];
....
....

Answer 2

第一名：首先，@ 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);

  }

 }

＆＃13;

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

＆＃13;

<div id="app">
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <button class="center-block" @click="changeColor" data-color="green">Green</button>
            </div>
            <div class="col-md-3">
                <button class="center-block" @click="changeColor" data-color="blue">Blue</button>
            </div>
            <div class="col-md-3">
                <button class="center-block" @click="changeColor" data-color="yellow">Yellow</button>
            </div>
            <div class="col-md-3">
                <button class="center-block" @click="changeColor" data-color="red">Red</button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="colorblock center-block">

                </div>
            </div>
        </div>
    </div>
</div>


<script src="https://unpkg.com/vue"></script>
<script>
    new Vue({
        el: '#app',
        methods: {
            changeColor: function() {
                // Things i tried
                // console.log(this.data-color);
                // console.log(this[data-color]);
            }
        }
    });
</script>

＆＃13;

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

2 个答案: