Set dynamic dynamic change of the selected default value

Question

How to change selected default value in DropDownList using Javascript?

I'm new to JavaScript and I am stuck in changing the selected default value in the drop down list. Here I want to change the default value of "111" to a new value. It should change after entering text, for example "abc" in Modal, and when I click the "Ok" button. Now it should display the selected default ("abc") in the drop-down list that I get from the modal text box. And also the old values ​​have not changed in the list.

Code snippet:

<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> 

I think I did something wrong in

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

Answer 1

You can use the HTMLSelectElement.selectedIndex property to set the index of the selected option.

If you set it to 0 , it will select the first option .

You can add option to select using HTMLSelectElement.add() . The correct syntax (from the docs):

collection.add (item [, before]);

Element

is an HTMLOptionElement or HTMLOptGroupElement element

before that, an element of the collection, or an index of the long type representing the item of goods, must be inserted earlier. If this parameter is null (or the index does not exist), the new element is attached to the end of the collection.

You used three arguments, not two .

So, one of the possible approaches is possible:

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

Working demo: https://jsfiddle.net/mrlew/w1zqL0h9/

As said, if you pass null as the second argument, it will add your option to the end. And you can select it by passing length-1 to selectedIndex .

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