Question

我正在使用jQuery，并且在更改我的选择下拉元素时发出警告时遇到了一些问题：

HTML：

<!DOCTYPE html>

<html>

    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="script.js"></script>       
    </head>

    <body>

        <div>
            <select id="fruits">
                <option selected>Choose a fruit</option>
                <option name="orange">Orange</option>
                <option name="mango">Mango</option>     
            </select>
        </div>

    </body>


</html>

我的js：

$('#fruits').on('change', function() {
    alert('Hello!');
});

当我在Chrome中运行此功能时，我的控制台中没有收到任何警告，并且更改选择选项不执行任何操作。知道我做错了吗？

Answer 1

将您的代码放入文档准备就绪：

$(function () {
    $('#fruits').on('change', function() {
        alert('Hello!');
    });
});

jsFiddle Demo

Answer 2

尝试以下代码：

1.您必须调用js函数或者您可以在就绪函数中编写代码

<!DOCTYPE html>

<html>

    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="script.js"></script>  
        <script>
        $(document).ready(function(){
        $('#fruits').on('change', function() {
        alert('Hello!');
    });
    });
        </script>     
    </head>

    <body>

        <div>
            <select id="fruits">
                <option selected>Choose a fruit</option>
                <option name="orange">Orange</option>
                <option name="mango">Mango</option>     
            </select>
        </div>

    </body>


</html>

Answer 3

你也可以试试这个：

<html>

    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="script.js"></script>  

    </head>

    <body>

        <div>
            <select id="fruits">
                <option selected>Choose a fruit</option>
                <option name="orange">Orange</option>
                <option name="mango">Mango</option>     
            </select>
        </div>
       <script>

        $('#fruits').on('change', function() {
        alert('Hello!');
    });

        </script>  
    </body>


</html>

尝试在更改select元素时提醒消息

3 个答案: