javascript - 下拉选择的值没有在视觉上更新(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;

以相同的方式更新选定的值。 但是，虽然这个更新值反射(reflect)在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 以了解差异。