Question

当我选择了一个选项时，我试图通过Ajax将页面内容加载到div中。

这是我的代码，但不起作用。

＆＃13;

$('mySelect').on('change',function(){
 function loadPage(url){
  $("#page").load(url);
}
});

＆＃13;

<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>

＆＃13;

我有一个包含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参数，然后将其传递给更改事件中的loadPage函数。

希望这有帮助。

＆＃13;

$(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);
}

＆＃13;

<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>

＆＃13;

Answer 2

非常简单：

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: