Question

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

我是JavaScript的新手，我坚持在下拉列表中更改默认选择值。在这里，我想更改我的默认选择值＆＃34; 111＆＃34;到了新的价值。我输入文本后必须改变，例如＆＃34; abc＆＃34;进入模态，当我点击＆＃34; Ok＆＃34; button.Now它必须显示默认选择（＆＃34; abc＆＃34;）到下拉列表中，我从模态的文本框中获取。并且列表中的旧值也没有改变。

代码段：

<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]）;

item 是HTMLOptionElement或HTMLOptGroupElement
     之前的
是可选的   和集合的元素，或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 /* ... */ }

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

1 个答案: