JavaScript - 來自兩個不同下拉菜單的輸出值

我還是Java Script的新手，我試圖創建一個非常簡單的工具，但我有一些問題，我似乎無法弄清楚如何。希望你們中的任何人都可以在這裏給我一些想法或例子。JavaScript - 來自兩個不同下拉菜單的輸出值

我有兩個下拉菜單，我想輸出選定的值，並以可讀的方式顯示它們。我如何使用document.getElementId和onchange編寫函數？

任何幫助，將不勝感激

實施例，

從（從LIST_1值）移動到（從值list_2）

<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>

來源

2016-12-11 New to Java Script

希望它能幫助。如果您有任何問題，請在評論中提問。

// 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>

來源

2016-12-11 13:00:14 Device

喜@device - 感謝您的幫助。我看到三種不同的方法，我會看到我能從這些例子中學到多少東西:) –

相對容易，請嘗試以下

//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>

來源

2016-12-11 13:00:21

您好@ coding-due.com - 感謝您的幫助，我看到您的方法，這實際上起作用。再次感謝您的幫助。我會繼續學習更多:) –

投票起來至少有一個答案:-) –

讓我們留在你原來的代碼。您需要將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>

來源

2016-12-11 13:10:35

感謝@Maimilian彼得斯的解釋！ –

JavaScript - 來自兩個不同下拉菜單的輸出值

回答

相關問題