下拉 selected 值未在视觉上更新（html-select、javascript）

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;) 中，您实际上并未设置 Select 的值。
您正在设置选项的值。

在fiddle中，当你记录它的时候，你也记录了选项的值，当然是GHI。

查看此更新 fiddle 并观看第 6 行和第 7 行的 JS 以了解差异。

下拉 selected 值未在视觉上更新（html-select、javascript）

Dropdown selected value not updating visually (html-select, javascript)

javascript

html

drop-down-menu

html-select