3

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

3 回答 3

6

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

于 2013-01-25T21:23:32.260 回答
2

如果只有一项，它永远不会改变。试试onblur吧。或者也许onclick，取决于您实际尝试做的事情。

于 2013-01-25T21:18:51.300 回答
0

我正在回答这个问题，以防它可以在 2020 年帮助某人。我在将数据库中的数据填充到只有单个数据的表单中时遇到了同样的问题，我能够以这种方式解决。在示例中，我将使用jquery进行插图。

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

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

其次，使用.append()在选择中添加一个空值 

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

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

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

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

                        });

我使用了箭头功能 .forEach()

于 2020-01-03T15:45:25.967 回答