在创建 <select>s 的 js 循环中设置选定的 <option>

Posted 2023-05-07

【中文标题】在创建 <select>s 的 js 循环中设置选定的 <option>

【英文标题】：Setting the selected <option> inside a js loop which creates <select>s

【发布时间】：2017-11-18 14:50:09

【问题描述】：

我需要通过更改 .value 来动态更改 select 的选定选项。但问题是，如果我在同一个 html div 之后添加一些东西，它会将所选选项重置为默认值。如何让它记住选择了哪个选项？为什么它甚至会重置以前的选择？

我认为 .innerHTML += 意味着它将 html 添加到元素的末尾而不改变已经存在的内容...

我从我的主 js 文件重新创建了问题，所以它更简单。基本上我们不知道将创建哪些选择以及将选择哪些选项。该信息来自数据库。因此，在创建所有选择后，我不能只移动 document.getElementById("select"+i).value = "option"+i; 部分。 输出：

function myFunction(a, b) 
inputs_div = document.getElementById("test_inputs");

for(i = 0; i < 4; i++)
    if(i == a || i == b)

        inputs_div.innerHTML += '<select name="select_name" id="select' + i + '">' + 
                    '<option value="option0">option0</option>' +
                    '<option value="option1">option1</option>' +
                    '<option value="option2">option2</option>' +
                    '<option value="option3">option3</option>' +
                    '</select>';

        document.getElementById("select"+i).value = "option"+i;
    
  

<div id="test_inputs"></div>
<button type="button" onclick="myFunction(1, 3)">run myFunction</button>

应该是option1，option3

是否有另一种方法可以同时选择每个在循环中创建的？

【问题讨论】：

添加到 innerHTML 首先序列化现有内容，附加新的 HTML，然后解析它。不要使用 innerHTML，使用 createElement 添加选项。

嗯不知道 createElement。但现在要改变一切将是一项艰巨的工作。我试图以某种方式将所有选择 id 和选项值保存在数组或对象中，然后在创建所有内容后设置它们。

【参考方案1】：

每次您的用户单击按钮时，您的 select 元素都会被完全删除并重新创建。发生此行为是因为您正在设置 innerHTML 属性来创建它们。这就是为什么每次都会重置所选值的原因 - 因为您每次都会看到一个全新的 select 元素。

【讨论】：

如果除了说明问题之外，它还提供了解决方案，这将是一个很好的答案。

【参考方案2】：

只需将 innerHTML 替换为 DOM 方法。

关于“但现在要改变所有的东西会很费力。”，以下根据 OP 代码花了大约 5 分钟。

function myFunction(a, b) 
  inputs_div = document.getElementById("test_inputs");

  for (var i=0; i<4; i++) 
    if (i == a || i == b) 
    
      var sel = document.createElement('select');
      sel.name = "select_name";
      sel.id = 'select' + i;
      
      for (var j=0; j<4; j++) 
        sel.appendChild(new Option('option' + j,'option' + j));
      
      inputs_div.appendChild(sel);
      sel.selectedIndex = i;
    
  

<div id="test_inputs"></div>
<button type="button" onclick="myFunction(1, 3)">run myFunction</button>