正在尝试在选择元素发生更改时向消息发出警报

Trying to alert message on change of a select element

本文关键字：消息 选择 元素      更新时间：2023-09-26

我在玩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中运行此程序时，我的控制台中不会收到任何警告，更改选择选项也不会有任何作用。知道我做错了什么吗？

将代码放入文档中：

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

jsFiddle演示。

尝试以下代码：

1.你必须调用js函数，或者你可以在ready函数中编写代码

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

你也可以试试这个：

<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>
相关文章：