时间戳

首页 > 解决方案 > html javascript jquery 选择单击选项并加载

javascript - html javascript jquery 选择单击选项并加载

问题描述

我想在 div> 中加载选项值。下面的代码可以成功运行。

 <select onchange="location.assign = this.options[this.selectedIndex].value;">
    <option>Please select</option>
    <option value="page1.html">page1</option>
    <option value="page2.html">page2</option>
    <option value="page3.html">page3</option>
</select>​
<div id="load_page"></div>

如何在 div 中加载页面谢谢。

标签： javascriptjqueryhtml

解决方案

使用 jQuery，您可以使用 $.load()：

$(function() {
  var page = $('#load_page');
  $('#pages').on('change', function(e) {
    var option = $(this).find('option:selected');
    if (0 === option.index()) {
      page.text('Oops');
    } else {

      page.text('Loading ' + option.val());
      page.load(option.val());
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="pages">
  <option>Please select</option>
  <option value="page1.html">page1</option>
  <option value="page2.html">page2</option>
  <option value="page3.html">page3</option>
</select>
<div id="load_page"></div>

仅使用 iframe 和 js：

document.getElementById('pages').onchange = function(e) {
  document.getElementById('load_page').src = this.options[this.selectedIndex].value;
};
<select id="pages">
  <option value="">Please select</option>
  <option value="page1.html">page1</option>
  <option value="page2.html">page2</option>
  <option value="page3.html">page3</option>
</select>
<iframe id="load_page"></iframe>

推荐阅读