Question

我还是Java Script的新手，我正在尝试创建一个非常简单的工具，但我有一些问题似乎无法弄清楚如何。希望你们中的任何人都可以在这里给我一些想法或例子。

我有两个下拉菜单，我想输出所选的值并以可读的方式显示它们。如何使用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>

Answer 1

希望它有所帮助。如果您有任何疑问，请在评论中提问。

＆＃13;

// 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;
});

＆＃13;

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

＆＃13;

Answer 2

相对容易，请尝试以下

＆＃13;

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

＆＃13;

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

＆＃13;

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>

JavaScript - 来自两个不同下拉菜单的输出值

3 个答案: