动态设置下拉列表的选定默认值答案

【问题标题】：Set selected default value of dropdown dynamically动态设置下拉列表的选定默认值
【发布时间】：2017-06-17 10:48:41
【问题描述】：

如何使用 Javascript 更改 DropDownList 中的默认选定值？

我是 JavaScript 新手，一直在更改下拉列表中的默认选定值。在这里，我想将我的默认选择值“111”更改为新值。在我将文本（例如“abc”）输入模态并且当我点击“确定”按钮时，它必须更改。现在它必须在我从文本框中获得的下拉列表中显示默认选择（“abc”）的模态。而且列表中的旧值也没有改变。

代码片段：

<form>
<select id="myList">
            <option>111</option>
            <option>222</option>
            <option>333</option>
        </select> <br>
        <br> 
</form>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <input type="text" id="addtext" size="50" /><br>
    Write & add text in the Dropdown list..</text>
    <br><br>
    <button id="okBtn">OK</button>

  </div>

</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");


// Get the button that add text in the dropdown
var btn1 = document.getElementById("okBtn");


// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

btn1.onclick = function(){
    //var element = document.getElementById('addtext');
    var y = document.getElementById("addtext");
    var x = document.getElementById("myList");
    var option = document.createElement("option");
    option.text = y.value;
    x.add(option, option.defaultSelected, x[0] );



    modal.style.display = "none";

}



// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

我认为我做错了什么

option.text = y.value;
    x.add(option, option.defaultSelected, x[0] );

【问题讨论】：

标签： javascript java jquery

【解决方案1】：

您可以使用HTMLSelectElement.selectedIndex 属性来设置所选选项的索引。

如果您将其设置为0，它将选择第一个选项。

您可以使用HTMLSelectElement.add() 将option 添加到select。正确的语法是（来自文档）：

collection.add(item[, before]);

item 是 HTMLOptionElement 或 HTMLOptGroupElement

之前是可选的和集合的一个元素，或者一个 long 类型的索引，代表 item 的 item 应该在之前插入。如果这参数为空（或索引不存在），新元素为附加到集合的末尾。

您使用的是三个参数，而不是两个。

因此，一种可能的方法是：

btn1.onclick = function(){
    /* ... */
    x.add(option, 0 ); //add as the first item, always
    x.selectedIndex = 0; //select the first item
    /* ... */

}

工作演示：https://jsfiddle.net/mrlew/w1zqL0h9/

如前所述，如果您将null 作为第二个参数传递，它会将您的option 附加到末尾。您可以选择它，将length-1 传递给selectedIndex。

btn1.onclick = function(){
    /* ... */
    x.add(option, null); //add option to the end
    x.selectedIndex = x.length-1; //select the last element
    /* ... */

}

【讨论】：