如何使用jQuery中的選擇框將頁面內容加載到div？

Question

當選擇選擇選項時，我試圖通過Ajax將頁面內容加載到div中。

這是我的代碼，但無法正常工作。

 $('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有什么建議嗎？

謝謝

Answer 1

您缺少ID號# ：

$('mySelect').on('change',function(){

應該：

$('#mySelect').on('change',function(){
___^

盡量避免內聯事件onchange()並使用data-*存儲url參數，然后將其傳遞給change事件內部的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>

Answer 2

這很簡單：

 $("#SelectOne").change(function() { $("#someDiv").load($(this).val()); });

 <select id="SelectOne"> <option>One.html</option> <option>Two.html</option> </select> <div id="someDiv"></div>

如何使用jQuery中的選擇框將頁面內容加載到div？

問題描述

2 個解決方案

解決方案1
3 已采納 2017-11-26 08:53:00

解決方案2
1 2017-11-26 09:00:29

如何使用jQuery中的選擇框將頁面內容加載到div？

問題描述

2 個解決方案

解決方案1 3 已采納 2017-11-26 08:53:00

解決方案2 1 2017-11-26 09:00:29

解決方案1
3 已采納 2017-11-26 08:53:00

解決方案2
1 2017-11-26 09:00:29