动态设置下拉选择的默认值

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，它将选择第一个选项。

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

collection.add（item [，before]）;

项是HTMLOptionElement或HTMLOptGroupElement

是可选 之前和集合的元素，或类型长， 代表应该插入的项目的项目的索引。如果 参数为空（或索引不存在），则将新元素 追加到集合的末尾。

您使用的不是 参数。

所以，一个可能的方法是：

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

}