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

【问题标题】：How to Load page content to div with select box in jquery?如何使用 jquery 中的选择框将页面内容加载到 div？
【发布时间】：2017-11-26 08:51:25
【问题描述】：

我正在尝试在选择选择选项时将页面内容加载到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 有什么建议吗？

谢谢

【问题讨论】：

为什么不创建一个 iframe 并根据需要设置其 src 属性（而不是通过 AJAX 获取页面）？

标签： javascript jquery html ajax

【解决方案1】：

您缺少 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>

【讨论】：

他的代码正在运行。在这里查看jsfiddle.net/qu8r8nLj/2@Nguyễn
@Irfan TahirKheli 谢谢！如何默认加载 One.html？

【解决方案2】：

很简单：

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

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

<div id="someDiv"></div>

【讨论】：