Setzen Sie den ausgewählten Standardwert des Dropdown-Menüs dynamisch

Question

Wie ändert man den voreingestellten Wert in DropDownList mit Javascript?

Ich bin neu in JavaScript und ich bleibe bei der Änderung standardmäßig ausgewählten Wert in der Dropdown-Liste. Hier möchte ich meinen voreingestellten Wert "111" auf den neuen Wert ändern. Es muss sich ändern, nachdem ich den Text eingegeben habe, zB "abc" in das Modal und wenn ich den "Ok" Knopf gedrückt habe. Nun muss er den voreingestellten ("abc") in der Dropdown Liste anzeigen, die ich aus dem Textfeld bekomme des Modalen. Und auch die alten Werte haben sich in der Liste nicht geändert.

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> 

Ich glaube, ich etwas falsch an

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

Answer 1

Sie HTMLSelectElement.selectedIndex Eigenschaft verwenden, können Sie den Index der ausgewählten Option zu setzen getan hatte. Wenn Sie es auf 0 einstellen, wählt es die erste Option.

Sie können einen option zu einem select mit HTMLSelectElement.add() hinzufügen. Die korrekte Syntax ist (in den Dokumenten):

Collection.add (item [vor]);

Artikel ist ein HTMLOptionElement oder HTMLOptGroupElement

vor ist optional und ein Element der Sammlung oder ein Index vom Typ long, das Element Element darstellt sollte vor eingefügt werden. Wenn dieser Parameter null ist (oder der Index nicht existiert), wird das neue Element am Ende der Auflistung an das Objekt angehängt.

Sie wurden mit drei Argumente, statt zwei.

also ein möglicher Ansatz ist:

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

} 

Arbeits Demo: https://jsfiddle.net/mrlew/w1zqL0h9/

Wie gesagt, wenn Sie null als zweites Argument übergeben, wird es Ihre option an das Ende anhängen. Und Sie können es unter der length-1 an die übergeben.

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

}