按值显示的Javascript渲染后选择未更新下拉列表

Question

我有一个选项下拉列表，可让我的用户选择以下几个选项之一。但我还想添加一个按钮，当按下该按钮时，将从下拉列表中选择特定选项。

这是可行的，但是问题在于下拉列表没有显示更新的选择，但是如果您单击下拉列表，您会看到选择的按钮被突出显示并且确实被选中。

function onclick() {
  document.form.server_select.value = 'Quebec';
}

<select name="server_select" id="server_select">
  <option value="random" selected>Auto Select</option>
  <option value="Quebec">Quebec</option>
  <option value="NewYork">NewYork</option>
  <option value="Seattle">Seattle</option>
  <option value="France">France</option>
</select>


<button onclick="onclick()">Button</button>

---

加载页面时，第一个选项显示在用户的下拉菜单中，如

和

按下按钮后，下拉列表仍显示列表中的第一个选项，但是单击下拉列表时，您会看到选择了其他选项。

我希望该下拉菜单也会显示新的选择。

Answer 1

代码按预期工作：

function change() {
    document.getElementById('server_select').value = 'Quebec';
}

<form>
<select name="server_select" id="server_select">
    <option value="random" selected>Auto Select</option>
    <option value="Quebec">Quebec</option>
    <option value="NewYork">NewYork</option>
    <option value="Seattle">Seattle</option>
    <option value="France">France</option>
</select>
</form>
<button onclick="change()">Button</button>

但是看屏幕截图，看起来他们在执行自定义下拉菜单，基本上您是在单击透明选择，然后他们手动更新其漂亮的下拉菜单，如下所示：

function change() {
    document.getElementById('server_select').value = 'Quebec';
}

function change2() {
    element = document.getElementById('server_select')
    element.value = 'Quebec';
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('change', true, true, window);
    element.dispatchEvent(event);
}

function open() {
    document.getElementById('server_select').value = 'Quebec';
}

document.getElementById('server_select').addEventListener('change', function(event) {
       document.getElementById('value').innerHTML = event.target.value
})

#dropdown {
    position: relative;
}
#server_select {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<form>
<div id="dropdown">
    <span id="value">Auto Select</span>
    <select name="server_select" id="server_select">
      <option value="random" selected>Auto Select</option>
      <option value="Quebec">Quebec</option>
      <option value="NewYork">NewYork</option>
      <option value="Seattle">Seattle</option>
      <option value="France">France</option>
    </select>
</div>

</form>
<button onclick="change()">Button</button>
<button onclick="change2()">Button Fixed</button>

您必须查看文档的实际HTML结构，以查看需要更新的内容，但是请使用“固定按钮”示例（基本上）来查看需要执行的操作。

Answer 2

您应该避免使用诸如onclick之类的保留字作为函数名

有关保留字的列表，请查看https://www.w3schools.com/js/js_reserved.asp

function change() {
  document.getElementById("server_select").value  = "Quebec";
}

<select name="server_select" id="server_select">
    <option value="random" selected>Auto Select</option>
    <option value="Quebec">Quebec</option>
    <option value="NewYork">NewYork</option>
    <option value="Seattle">Seattle</option>
    <option value="France">France</option>
</select>


<button onClick="change()">Button</button>

<script>

</script>