gpt4 book ai didi

javascript - 脚本页面不起作用

转载 作者:行者123 更新时间:2023-11-30 14:35:06 25 4
gpt4 key购买 nike

为什么下面的脚本不起作用? JavaScript 文件位于另一个文件夹中,我的函数仅在我通过控制台调用它时有效。

$('#myOptions').change(function() {
var val = $("#myOptions option:selected").text();
alert(val);
});
<!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>

我的文件夹图片:

enter image description here

js文件夹内的图片:

enter image description here

最佳答案

因为您试图在元素存在于页面之前就选择该元素:

$('#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>

关于javascript - 脚本页面不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50542066/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com