2017-02-01 10 views
0

こんにちは私は小さな問題を抱えています。これらの中からユーザが選択できる4つの選択ボックスが、それぞれループ内でループ内で動的に作成されています。彼らはすべて同じIDを共有します。複数の選択ボックスの値を取得するjavascript

選択した各値を動的に印刷したいので、選択ボックス1からその値を印刷すると、ボックス2のオプションを選択すると最初の値が上書きされます。

私のコードは最初の選択ボックスでしか機能しません。それはあなたの問題を解決する必要があり、次のように

for(var i=0; i<5; i++){ 
    var a=document.createElement("select"); 
    aa.setAttribute('id', 'boxes'); 
    //..addoptions in another loop then in the same loop I have 
    aa.onchange = function(){ tester();}; 
} 


function tester(){ 
    var i = document.getElementById("boxes"); 
    var ii = i.selectedIndex; 
    document.getElementsById("pTag").innerHTML=i.options[ii].value 
} 

Javascriptが唯一

+1

あなたが述べたように、彼らは同じIDを持っています。したがって、 'document.getElementsById(" pTag ")'は常に最初の選択を返し、したがって最初の選択だけが更新されます。選択には異なるIDを使用します。選択ボックスをどのように作成するかを含めることができれば、助けがはるかに簡単になります。 – Milli

+0

これは理にかなっています。選択ボックスをループで作成しています(var i = 0; i <5; i ++){var a = document.createElement( "select"); aa.setAttribute( 'id'、 'boxes'); ..そして、私はオプションを追加します – newbie

+0

質問を編集し、あなたが入れたコードへの参照を作る他のコードを追加するのは難しいです。 'onclick'または' onchange'イベントであればあなたの問題を解決する方法をもっと簡単に指摘することができます。しかし、今は別のIDを使用するには、 'a = document.createElement(" select "); – Milli

答えて

0

はあなたのコードを変更してください。 aa.onchage = testerではなくaa.onchange = tester()であることに注意してください。なぜなら、戻り値ではなくに関数testerを割り当てているからです。

for(var i=0; i<5; i++){ 
    var a=document.createElement("select"); 
    aa.setAttribute('id', 'boxes'+i); 
    //..addoptions in another loop then in the same loop I have 
    aa.onchange = tester; 
} 


function tester(event){ 
    document.getElementsById("pTag").innerHTML = event.target.value; 
} 
+0

この作品はとても役に立ちますので、あまりにも多くの時間を無駄にしました – newbie

+0

あなたの問題の解決策としてマークするのは常に良いアイデアです。 – Milli

関連する問題