Question

我是jQuery的新手，无法在下拉框中触发更改事件。

这是我的HTML标记

<select id="mini_bookinglocation" name="mini_bookinglocation">
    <option selected="selected" value="">Please Select</option>
</select>

这是我的jQuery

$("#mini_bookinglocation").change(function() 
{
    alert(" test ");
});

我已经尝试将其放在文档就绪块以及外部，但似乎我无法使其正常工作。我没有看到警报出来。

我是否还需要将这些功能与文档就绪部分保持一致？

有人可以帮忙吗？

由于

只是补充一点，上面的值将使用jQuery动态传递。

Answer 1

下拉列表中只有一个值。所以价值永远不会改变。这就是为什么.change没有被调用的原因。尝试在选择框中添加更多选项。

此外应该在document.ready内编写jQuery代码。

Answer 2

尝试添加更多选项，因为当值发生更改时会触发更改事件。在您的情况下，值没有变化。

<select id="mini_bookinglocation" name="mini_bookinglocation">
    <option selected="selected" value="">Please Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
   </select>

来自docs

更改事件在其值更改时发送到元素。对于选择框，复选框和单选按钮，将触发该事件当用户使用鼠标进行选择时，立即进行事件的其他元素类型延迟到元素丢失对焦。

我还需要将这些功能与文档就绪部分保持一致吗？

不，没有必要将代码放在ready函数下，因为在发生更改时会触发事件

<强> DEMO

Answer 3

在文档就绪函数中分配更改事件侦听器

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
        <script type="text/javascript">

        $(document).ready(function() {
            $("#mini_bookinglocation").change(function() {
                alert(" test ");
            });
        });

        </script>
    </head>
    <body>
        <select id="mini_bookinglocation" name="mini_bookinglocation">
        <option selected="selected" value="">Please Select</option>
        <option value="A">Option A</option>
        <option value="B">Option B</option>
        <option value="C">Option C</option>
        <option value="D">Option D</option>
        <option value="E">Option E</option>
        </select>
    </body>
</html>

这是 example

Answer 4

我发现了问题。这是因为在我的代码中我在一个地方使用jQuery而在另一个地方使用$。我能够谷歌这个，只是将所有改为jQuery并删除所有$，它的工作原理。很抱歉没有显示完整的代码，但通过阅读所有答案，我能够学到很多东西。

谢谢大家的帮助。

jQuery下拉列表更改事件未触发

4 个答案: