gpt4 book ai didi

javascript - 如何使用jquery中的选择框将页面内容加载到div?

转载 作者:行者123 更新时间:2023-11-28 04:45:35 24 4
gpt4 key购买 nike

选择选择选项时,我正在尝试通过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/

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