Question

我在javascript中有一些下拉菜单，以及包含所有这些菜单的数组：

HTML：

<select name="a" id="a">
  <option value="ABC">ABC</option>
  <option value="DEF">DEF</option>
  <option value="GHI">GHI</option>
</select>

<select name="b" id="b">
  <option value="JKL">JKL</option>
  <option value="MNO">MNO</option>
  <option value="PQR">PQR</option>
</select>

使用Javascript：

var a_dropdown = document.getElementById("a")
var b_dropdown = document.getElementById("b")
var c_dropdown = document.getElementById("c")
var all_dropdowns = [a_dropdown, b_dropdown, c_dropdown]

现在，我可以从其独立变量设置下拉列表的值，并且可视化更新：

a_dropdown.value = a_dropdown.options[2].value

可以看到工作in this jsfiddle。

现在，这就是事情变得奇怪的地方。我还可以通过包含所有下拉列表的数组的数组索引来更改下拉列表的值：

all_dropdowns[0][all_dropdowns[0].selectedIndex].value = all_dropdowns[0].options[2].value;

以相同的方式更新所选值。但，此更新值反映在a_dropdown的选定索引值中，如in this updated jsfiddle所示（运行并查看警报消息），未显示更改的值在下拉菜单中直观地显示。

看作javascript通过引用为非原始类型传递变量，我无法弄清楚为什么以这两种不同的方式设置下拉列表的值会导致不同的行为。理想情况下，我想找到一种方法来获得设置下拉值的第二种方法，以产生与第一种方法相同的行为（实际上可视化地改变菜单的值）。

Answer 1

在第二个示例（all_dropdowns[0][all_dropdowns[0].selectedIndex].value = all_dropdowns[0].options[2].value;）中，您实际上并未设置选择的值。
您正在设置选项的值。

在小提琴中，当你记录它时，你也记录了选项的值，当然这是GHI。

请参阅此更新的fiddle并观看第6行和第7行的JS，以了解其中的差异。

下拉列表选择的值无法直观更新（html-select，javascript）

1 个答案: