如何使用 queryselectorAll() select <select> 标签包括选中和未选中的选项？

Question

//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 Whosebug) 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
}

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

问题：问题是我想要 select 标签的整个选项集，而不仅仅是那些 checked/selected。上面的代码将默认 selected 选项的值设置为一个存储在本地存储中，但不反映表单中的更改。它总是显示默认值，尽管给出

alert(input_select[i].value);

完美体现内部变化！

Answer 1

我想我得回答我自己的问题:-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');

原因：我一直在尝试将存储的值分配给选项本身（选项标签）而不是整个 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.

如何使用 queryselectorAll() select <select> 标签包括选中和未选中的选项？

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

javascript

jquery

select

selectors-api