javascript 选择框 onchange 事件只有一个 <option>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14530507/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select box onchange event with only one <option>
提问by John Smith
The onchange event works great and populates my input (textbox) just fine, but when the onchange event is applied to the drop down box with only 1 single option in it, it does not work. How can I get the onchange to fire even if, there is one or multiple items?
onchange 事件效果很好并且可以很好地填充我的输入（文本框），但是当 onchange 事件应用于只有 1 个选项的下拉框时，它不起作用。即使有一个或多个项目，我如何才能触发 onchange？
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript">
function test(x) {
var x = document.getElementById(x).options[document.getElementById(x).selectedIndex].text
document.getElementById('output').value = x
}//end of function
</script>
</head>
<body>
<select id="drop1" onchange="test(this.id)">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<br><br>
<select id="drop2" onchange="test(this.id)">
<option value="volvo">Volvo</option>
</select>
<br><br>
<input type="text" id="output">
</body>
</html>
采纳答案by gilly3
If there is only one item, it never will change. Try onblurinstead. Or maybe onclick, depending on what you are actuallytrying to do.
如果只有一项，它永远不会改变。试试吧onblur。或者也许onclick，这取决于您实际尝试做什么。
回答by Wet Noodles
You could add an empty option at the top of every select box, or perhaps an option that just says -Select-. Then, if necessary, alter your script to ignore the empty selection.
您可以在每个选择框的顶部添加一个空选项，或者添加一个仅显示 -Select- 的选项。然后，如有必要，更改您的脚本以忽略空选择。
回答by Don Phelix
I am answering this question in case it can help somebody in 2020. I had the same problem populating data from the database into the form where there was a single data and I was able to solve this way. In the example am gonna use jqueryfor illustrations.
我正在回答这个问题，以防它可以在 2020 年帮助某人。我在将数据从数据库填充到只有单个数据的表单中时遇到了同样的问题，我能够以这种方式解决。在示例中，我将使用jquery进行插图。
First you have to empty the select element using .empty()function.
首先，您必须使用.empty()函数清空 select 元素。
$('#drop2').empty();
Secondly add an empty value into the select using .append()
其次使用.append()在选择中添加一个空值
$('#drop2').append("<option value='0'>Select</option>");
After that now you can go ahead to add your data into the select element because they are going to be two options, one empty while the other carries the data.
之后，现在您可以继续将数据添加到 select 元素中，因为它们将是两个选项，一个为空，另一个携带数据。
Finally populate your data from server this way using ajaxin success function
最后使用成功函数中的ajax以这种方式从服务器填充数据
success:function(response){
$('#drop2').empty().append("<option value='0'>Select</option>");
response.forEach((item)=>{
$('#drop2').append("<option value='"+item[]+"'>"+item[1]</option>");
});
I have used the arrow function.forEach()
我用过箭头函数.forEach()
