ドロップダウンの選択されたデフォルト値を動的に設定します。

Question

Javascriptを使用してDropDownListのデフォルトの選択値を変更する方法はありますか？

JavaScriptを初めて使用しています。私はドロップダウンリストでデフォルトの選択値を変更することに固執しています。 ここでは、デフォルトの選択値 "111"を新しい値に変更します。それは私がテキストを入力した後に変更する必要があります "abc"モーダルと私は "Ok" button.Nowを押すと、私はテキストボックスから取得するドロップダウンリストに（ "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> 

私は私はあなたが選択したオプションのインデックスを設定するHTMLSelectElement.selectedIndexプロパティを使用することができます

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

Answer 1

で何か間違ったことをしたと思います。

0に設定すると、のが選択されます。

を使用して、selectにoptionを追加できます。正しい構文は、（ドキュメントから）である。

collection.add（項目[前]）。

項目はHTMLOptionElement又はHTMLOptGroupElement

が オプションで前にコレクションの要素、または前に挿入されるべきアイテムのアイテムを表すlong型、 の指標です。この パラメータが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/

ように言った、あなたが2番目の引数として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 
    /* ... */ 

}