每次从下拉菜单列表中选择新项目时,我都需要创建一个事件处理程序来运行我的函数。
到目前为止,我已经尝试过“onselect”、“onclick”、“onmousedown”和“onblur”,但似乎都不起作用。就此而言,每次有人从下拉菜单列表中选择新项目或同一项目时需要更新的值是多少?
最佳答案
您需要使用 onchange
事件处理程序,您可以使用不同的方法来实现它。第一个是直接在你的 html select
标签中写事件:
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
<select id="mySelect" onchange="myFunction()">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
<p id="demo"></p>
仅使用 Javascript:
var mySelect = document.getElementById('mySelect');
mySelect.onchange = function() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
<p>Select a new car from the list.</p>
<select id="mySelect">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
<p id="demo"></p>
或者你可以使用jQuery:
$("#mySelect").change(function() {
$("#demo").html("You selected: " + this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Select a new car from the list.</p>
<select id="mySelect">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
<p id="demo"></p>
或者对于 jQuery,您可以使用 on
功能:
$("#mySelect").on("change", function() {
$("#demo").html("You selected: " + this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Select a new car from the list.</p>
<select id="mySelect">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
<p id="demo"></p>
关于javascript - 我需要为 JavaScript 中的下拉菜单列表使用什么事件处理程序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33932395/