Dynamiczne wybieranie domyślnej wybranej listy rozwijanej

Question

Jak zmienić domyślną wybraną wartość w DropDownList przy użyciu Javascript?

Jestem nowicjuszem w JavaScript i utknąłem w zmianie domyślnej wybranej wartości na liście rozwijanej. Tutaj chcę zmienić moją domyślną wybraną wartość "111" na nową wartość. Musi się zmienić po wprowadzeniu tekstu, np. "Abc" do Modalu, a kiedy uderzę w przycisk "Ok". Teraz musi wyświetlić domyślny wybrany ("abc") na liście rozwijanej, którą dostaję z pola tekstowego modalu. Również stare wartości nie zmieniły się na liście.

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> 

Myślę, że zrobił coś złego w

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

Answer 1

Można użyć HTMLSelectElement.selectedIndex właściwość, aby ustawić indeks wybranej opcji.

Jeśli ustawisz tę opcję na 0, zostanie wybrana pierwsza opcja .

Można dodać option do select przy użyciu HTMLSelectElement.add(). Prawidłowe składni (od Dokumenty)

collection.add (pozycja [przed]);

element jest HTMLOptionElement lub HTMLOptGroupElement

przed opcjonalnie i element zbioru lub indeks rodzaju długie, stanowiących przedmiot element powinien być włożona wcześniej. Jeśli ten parametr ma wartość null (lub indeks nie istnieje), nowy element to dołączany do końca kolekcji.

uzywasz trzy argumenty, zamiast dwa.

Tak, jednym z możliwych rozwiązań jest:

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

} 

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

Jak powiedział, jeśli przejdą null jako drugi argument, to dołączyć swoją option do końca. Możesz go wybrać podając length-1 do selectedIndex.

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

}