複数の選択ボックスを動的に更新する

Question

2〜3の選択ドロップダウンボックスを持つページがあります。私はそれぞれのオプションを同じリストに動的に更新する必要があります。私はそれを更新しようとするたびに、最初のものだけを行います。私は問題がそれを通ってループしていないと思う。

// HTML

<form id="myForm"> 
<select id="selectNumber"> 
<option>Choose a number</option> 
</select> 
</form> 
<form id="myForm"> 
<select id="selectNumber"> 
<option>Choose a number</option> 
</select> 
</form> 
<form id="myForm"> 
<select id="selectNumber"> 
<option>Choose a number</option> 
</select> 
</form> 

// JavaScriptの

var myArray = new Array("1", "2", "3", "4", "5"); 


    // Get dropdown element from DOM 
    var dropdown = document.getElementById("selectNumber"); 

    // Loop through the array 
    for (var i = 0; i < myArray.length; ++i) { 
     // Append the element to the end of Array list 
     dropdown[dropdown.length] = new Option(myArray[i], myArray[i]); 
     } 

http://jsfiddle.net/p6eqrxn8/1/

Answer 1

マイクはすべてのあなたの選択のために同じIDフィールドを使用することはできません、と述べたのと同じように。

"IDはページ内で一意である必要がありますが、指定されたIDを持つ複数の要素が存在する場合、getElementById（）メソッドはソースコードの最初の要素を返します。

選択したクラスに同じクラスを設定してから、そのクラスのすべての要素を返すgetElementsByClassName（クラス）を使用してみることもできます。

また、変更したいもの以外にページ内に他の選択要素がない場合、すべての選択要素を返すgetElementsByTagName（ 'select'）を使用できます。

Answer 2

あなたは、フォームIDのgetElementByIdを使用すると、フォームのすべてのあなたのdropdownを取得するためにgetElementsByTagName

でその変数を使用し、その後、次のコードのようにいくつかの変数

に保存することができます。

私は以下を参照して

 window.onload = function() { 
 
      var myFormdropdown = document.getElementById("myForm"); 
 
      var varselect = myFormdropdown.getElementsByTagName("select"); 
 
      var myArray = new Array("1", "2", "3", "4", "5"); 
 
      
 
      // Loop through the array 
 
      for (var j = 0; j < varselect.length; j++) { 
 
      for (var i = 0; i < myArray.length; ++i) { 
 
       // Append the element to the end of Array list      
 
       var option = document.createElement('option'); 
 
       option.value = myArray[i]; 
 
       option.innerHTML = myArray[i]; 
 
       varselect[j].options.add(option); 
 
      } 
 
      } 
 
     };

<form id="myForm"> 
 
    <select id="selectNumber"> 
 
    <option>Choose a number</option> 
 
    </select> 
 
    <select id="selectNumber"> 
 
    <option>Choose a number</option> 
 
    </select> 
 
    <select id="selectNumber"> 
 
    <option>Choose a number</option> 
 
    </select> 
 
</form>

このスクリプトを使用して、あなたのhtmlを修正が、これはあなたを助けることを願っています。