Установить выбранное значение по умолчанию динамического динамического отображения

Question

Как изменить выбранное значение по умолчанию в DropDownList с помощью Javascript?

Я новичок в JavaScript, и я застрял в изменении выбранного значения по умолчанию в выпадающем списке. Здесь я хочу изменить свое выбранное по умолчанию значение «111» на новое значение. Он должен измениться после ввода текста, например «abc» в Modal, и когда я нажму кнопку «Ok». Теперь он должен отобразить выбранный по умолчанию («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 (пункт [перед]);

элемент является HTMLOptionElement или HTMLOptGroupElement

перед тем является необязательным и элементом коллекции, или индекс типа длинного, , представляющий элемент элемент должен быть вставлен перед. Если этот параметр имеет значение 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 
    /* ... */ 

}