如何使用 queryselectorAll(） 选择 <select> 标签，包括选中和未选中的选项

How to select the <select> tag including checked and unchecked options using queryselectorAll()?

本文关键字：包括选 选项 标签 select queryselectorAll 何使用 选择      更新时间：2023-09-26
//initial  code   
var selectInputs = document.querySelectorAll('option:checked');
    var selectArray=[];                        
      for(var i=0;i<selectInputs.length;i++)
          {
            selectArray[i]=selectInputs[i].value;//am doing this since I found out (from stackoverflow) that selectInputs contains a NodeList and in order to use it, it must be converted or saved as an array
          }
     //later stage manipulation code
var input_select=  document.querySelectorAll('option:checked');
for(var i=0;i<input_select.length;i++)
{
input_select[i].value=selectArray[i];//I am trying to change the value of the <select> option
}

目的：用户在表单中选择选项，数据保存在本地存储中。 我想在表单重新加载时反映相同的内容。我不是为特定表单工作，所以使用 Jquery 似乎是徒劳的(因为它适用于类或 id，我不知道通用表单的任何标签的 id 或类(

问题： 问题是我想选择整个标签选项集，而不仅仅是已选中/选择的选项集。上面的代码将默认选定选项的值设置为存储在本地存储中的值，但不反映表单中的更改。它始终显示默认值，尽管给出 

alert(input_select[i].value);

完美地反映了内部变化！

猜猜我必须回答我自己的问题:-D

如果你能看到，只有一个愚蠢的变化

后期操作代码 以上。

答：

var input_select=  document.querySelectorAll('select');
for(var i=0;i<input_select.length;i++)
{
input_select[i].value=selectArray[i];//I am trying to change the value of the <select> option
}

而不是 

var input_select=  document.querySelectorAll('option:checked');

它必须是 

var input_select=  document.querySelectorAll('select');

原因：我一直在尝试将存储的值分配给选项本身(选项标签(而不是整个选择标签。

警告：在代码中

input_select[i].value=selectArray[i];

也可能是

input_select[i].value="Friday";

如果您已经有这样的选项，否则它将显示空白。

<select name="days" id=days">
<option value="0"> Friday </option>
<option value="1"> Monday </option>
</select>
works
<select name="days" id=days">
<option value="0"> Saturday </option>
<option value="1"> Monday </option>
</select>
doesn't work. Shows a blank.
相关文章：