Set selected default value of dropdown dynamically

Question

How to change default selected value in DropDownList using Javascript?

I am new to JavaScript and i'm stuck at changing default selected value in dropdown list. Here i want to change my default selected value "111" to the new value. It has to change after i enter the text e.g."abc" into the Modal and when i hit the "Ok" button.Now it has to display default selected("abc")in to the dropdown list which i get from the text box of the modal. And also the old values has 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 had done something wrong at

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

Answer 1

You can use 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 an option to a select using HTMLSelectElement.add(). The correct syntax is (from the docs):

collection.add(item[, before]);

item is an HTMLOptionElement or HTMLOptGroupElement

before is optional and an element of the collection, or an index of type long, representing the item item should be inserted before. If this parameter is null (or the index does not exist), the new element is appended to the end of the collection.

You were using three arguments, instead of two.

So, one possible approach is:

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 a second argument, it will append your option to the end. And you can select it passing length-1 to the selectedIndex.

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

}