Question

onchange事件运行良好并且填充我的输入（文本框）就好了，但是当onchange事件应用于下拉框时只有一个选项，它就不起作用了。即使有一个或多个项目，我怎样才能使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>

Answer 1

您可以在每个选择框的顶部添加一个空选项，或者可以选择只显示-Select-的选项。然后，如有必要，请更改脚本以忽略空选择。

Answer 2

如果只有一个项目，它永远不会改变。请尝试使用onblur。或者也许是onclick，具体取决于您实际尝试做什么。

Answer 3

我正在回答这个问题，以防它在2020年能对某人有所帮助。我遇到了同样的问题，即将数据库中的数据填充到只有一个数据的表单中，并且我能够解决此问题。在示例中，我将使用jquery进行说明。

首先，您必须使用.empty()函数清空选择元素。

$('#drop2').empty();

使用.append()

向选择中添加一个空值

$('#drop2').append("<option value='0'>Select</option>");

在那之后，您现在可以继续将数据添加到select元素中，因为它们将是两个选项，一个为空，而另一个为数据。

使用成功功能中的ajax，以这种方式最后从服务器填充数据

success:function(response){
                        $('#drop2').empty().append("<option value='0'>Select</option>");
                        response.forEach((item)=>{
                            $('#drop2').append("<option value='"+item[]+"'>"+item[1]</option>");

                        });

我用过arrow function .forEach()

仅使用一个<option> </option>选择onchange事件框

3 个答案: