动态设置下拉列表的默认值

Question

如何使用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] );

Answer 1

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

如果将其设置为0,则会选择第一个选项.

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

collection.add(item [,before]);

item是HTMLOptionElement或HTMLOptGroupElement

before是可选的,并且应该在之前插入表示项目项的集合的元素或类型为long的索引.如果此参数为null(或索引不存在),则新元素将附加到集合的末尾.

你使用了三个参数,而不是两个.

所以,一种可能的方法是:

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
    /* ... */

}