Question

为什么下面的脚本不起作用？ JavaScript文件位于另一个文件夹中，我的功能仅在我通过控制台调用时才起作用。

＆＃13;

$('#myOptions').change(function() {
    var val = $("#myOptions option:selected").text();
    alert(val);
});

＆＃13;

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Exos">
    <meta name="viewport" content="width=device-width", initial-scale="1">
    <link type="text/css" rel="stylesheet" href="css/exos.css">
    <script type="text/javascript" src="js/jquery-3.3.1.slim.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</head>
<body>
    <select id="myOptions">
        <option value='option1'>Gateway 1</option>
        <option value='option2'>Gateway 2</option>
        <option value='option3'>Gateway 3</option>
    </select>
</body>
</html>

＆＃13;

我的文件夹图片：

js文件夹内的图片：

Answer 1

因为您试图在页面上存在之前选择一个元素：

$('#myOptions')

将jQuery代码包装在document.ready处理程序中，以便在DOM完全加载后执行：

$(function () {
    $('#myOptions').change(function() {
        var val = $("#myOptions option:selected").text();
        alert(val);
    });
});

相反，您可以将脚本元素移动到页面底部，以便在目标DOM元素之后引用它们：

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Exos">
    <meta name="viewport" content="width=device-width", initial-scale="1">
    <link type="text/css" rel="stylesheet" href="css/exos.css">
</head>
<body>
    <select id="myOptions">
        <option value='option1'>Gateway 1</option>
        <option value='option2'>Gateway 2</option>
        <option value='option3'>Gateway 3</option>
    </select>
    <script type="text/javascript" src="js/jquery-3.3.1.slim.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>

Answer 2

您必须将脚本移动到<body>的底部或将代码包装在$(document).ready函数中。

脚本页面不起作用

2 个答案: