JavaScript - 2つの異なるドロップダウンメニューからの出力値

Question

私はまだJava Scriptを初めて使っています。私は非常に単純なツールを作成しようとしていますが、あなたの誰かが私にここでいくつかのアイデアや例を教えてくれることを願います。

私は2つのドロップダウンメニューがあり、選択した値を出力して、それらを読みやすい方法で表示したいとします。 document.getElementIdとonchangeを使用して関数を書くにはどうすればよいですか？

すべてのヘルプは大幅に

例をいただければ幸いです、

は

<script type="text/javascript"> 

</script> 

<div class="moving_1"> 
<span>* Moving from:</span><br/> 
<select name="list_1" id="list_1"> 
<option value="CA">CA</option> 
<option value="DC">DC</option> 
<option value="PA">PA</option> 
<option value="NY">NY</option> 
</select> 
</div> 

<div class="moving_2"> 
<span>* Moving to:</span><br/> 
<select name="list_2" id="list_2"> 
<option value="CA">CA</option> 
<option value="DC">DC</option> 
<option value="PA">PA</option> 
<option value="NY">NY</option> 
</select> 
</div> 

<p>Moving from (value from list_1) to (value from list_2)</p> 

Answer 1

（list_2から値）に（list_1から値）から移動し、それがお役に立てば幸いです。ご不明な点がございましたら、コメントしてください。

// We find element by id "list_1" then we add an event listener "change" 
 
document.getElementById("list_1").addEventListener("change", function(e) { 
 
    // Now we find element by id "moving_1_result" and set its innerHTML to targets value aka list_2's value 
 
    document.getElementById("moving_1_result").innerHTML = e.target.value; 
 
}); 
 

 
document.getElementById("list_2").addEventListener("change", function(e) { 
 
    document.getElementById("moving_2_result").innerHTML = e.target.value; 
 
});

<div class="moving_1"> 
 
    <span>* Moving from: <span id="moving_1_result"></span></span> 
 
    <br/> 
 
    <select name="list_1" id="list_1"> 
 
    <option value="CA">CA</option> 
 
    <option value="DC">DC</option> 
 
    <option value="PA">PA</option> 
 
    <option value="NY">NY</option> 
 
    </select> 
 
</div> 
 

 
<div class="moving_2"> 
 
    <span>* Moving to: <span id="moving_2_result"></span></span> 
 
    <br/> 
 
    <select name="list_2" id="list_2"> 
 
    <option value="CA">CA</option> 
 
    <option value="DC">DC</option> 
 
    <option value="PA">PA</option> 
 
    <option value="NY">NY</option> 
 
    </select> 
 
</div>

Answer 2

それは比較的簡単に、さんがあなたの元のコードに滞在してみましょう

//onchange handler 
 
function changed(listId){ 
 
    var list = document.getElementById(listId); 
 
    document.getElementById("val_"+listId).innerHTML = list.value; 
 
} 
 

 
//initialization 
 
document.getElementById("val_list_1").innerHTML = document.getElementById("list_1").value; 
 
document.getElementById("val_list_2").innerHTML = document.getElementById("list_2").value;

<div class="moving_1"> 
 
<span>* Moving from:</span><br/> 
 
<select onchange="changed('list_1')" name="list_1" id="list_1"> 
 
<option value="CA">CA</option> 
 
<option value="DC">DC</option> 
 
<option value="PA">PA</option> 
 
<option value="NY">NY</option> 
 
</select> 
 
</div> 
 

 
<div class="moving_2"> 
 
<span>* Moving to:</span><br/> 
 
<select onchange="changed('list_2')" name="list_2" id="list_2"> 
 
<option value="CA">CA</option> 
 
<option value="DC">DC</option> 
 
<option value="PA">PA</option> 
 
<option value="NY">NY</option> 
 
</select> 
 
</div> 
 

 
<p>Moving from <span id="val_list_1"></span> to <span id="val_list_2"></span></p>

Answer 3

次のことをしてみてください。ドロップダウンメニューにeventListenerを追加し、段落のinnerHTMLを上書きする必要があります。 あなたの要素は、class nameまたはtag nameのいずれかで識別できます。

識別プロセスを容易にするために、クラス名だけでなくIDを持つことが望ましいです。

document.getElementsByClassName("moving_1")[0].addEventListener("change", update_text); 
 
document.getElementsByClassName("moving_2")[0].addEventListener("change", update_text); 
 

 
function update_text() { 
 
    document.getElementById("moving_text").innerHTML = "Moving from " + document.getElementsByClassName("moving_1")[0].getElementsByTagName('select')[0].value + " to " + document.getElementsByClassName("moving_2")[0].getElementsByTagName('select')[0].value; 
 

 
}

<div class="moving_1"> 
 
    <span>* Moving from:</span><br/> 
 
    <select name="list_1" id="list_1"> 
 
     <option value="CA">CA</option> 
 
     <option value="DC">DC</option> 
 
     <option value="PA">PA</option> 
 
     <option value="NY">NY</option> 
 
    </select> 
 
</div> 
 

 
<div class="moving_2"> 
 
    <span>* Moving to:</span><br/> 
 
    <select name="list_2" id="list_2"> 
 
     <option value="CA">CA</option> 
 
     <option value="DC">DC</option> 
 
     <option value="PA">PA</option> 
 
     <option value="NY">NY</option> 
 
    </select> 
 
</div> 
 

 
<p id="moving_text">Moving from (value from list_1) to (value from list_2)</p>