选择选择选项时，我正在尝试通过AJAX加载页面内容。
这是我的代码，但它不起作用。
$('mySelect').on('change',function(){
function loadPage(url){
$("#page").load(url);
}
});<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<select class="custom-select" id="mySelect">
<option value="1" onchange="loadPage('One.html')">One</option>
<option value="2" onchange="loadPage('Two.html')">Two</option>
</select>
</div>
<div id="page"></div>
</body>
</html>我有一个带有 2 个选项的选择框，值是 One.html 和 Two.html，在它下面我有一个 div 并希望在选择框更改时将 One.html 和 Two.html 中的内容加载到 div 中...通过 Ajax 有什么建议吗？
谢谢
最佳答案
您缺少 id 符号 # :
$('mySelect').on('change',function(){
应该是:
$('#mySelect').on('change',function(){
___^
尽量避免内联事件 onchange() 并使用 data-* 存储 url 参数，然后将其传递给 loadPage 函数在更改事件中。
$(function() {
loadPage("One.html");
$('#mySelect').on('change', function() {
loadPage($(this).find(':selected').data('url'));
//OR
// $("#page").load( $(this).find(':selected').data('url') );
});
});
function loadPage(url) {
$("#page").load(url);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<select class="custom-select" id="mySelect">
<option value="1" data-url="One.html">One</option>
<option value="2" data-url="Two.html">Two</option>
</select>
</div>
<div id="page"></div>关于javascript - 如何使用jquery中的选择框将页面内容加载到div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47494433/