下拉所选值不可视更新(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

这可以看到正在工作的在这弹琴里。

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

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

它以相同的方式更新选定的值。但是，虽然这个更新的值反映在a_dropdown的选定索引值中，如所示的在这个更新的弹琴里 (运行并查看警报消息)，但是更改的值没有在下拉菜单中直观地显示。

当javascript通过引用传递非原始类型的变量时，我无法理解为什么以这两种不同的方式设置下拉列表的值会导致不同的行为。理想情况下，我想找出一种方法来获得第二种方法来设置下拉值以导致与第一种相同的行为(实际上可以直观地更改菜单的值)。

Answer 1

在第二个示例(all_dropdowns[0][all_dropdowns[0].selectedIndex].value = all_dropdowns[0].options[2].value;)中，您并没有实际设置Select的值。

您正在设置选项的值。

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

请查看此更新的小提琴，并查看第6行和第7行的JS，以查看差异。