Question

我想在div＆gt;中加载选项值。以下代码可以成功运行。

 <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中加载页面感谢。

Answer 1

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

Answer 2

您可以使用jquery的load()方法。 load（）方法从服务器加载数据并将返回的数据放入选定的元素中。

$(document).ready( function() {
    $("select").on("change", function() {
        if($("select option:selected").index() > 0) {
            console.log("cannot load");
        } else {
            $("#load_page").load($('option').val());
        }
    });
});

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

2 个答案: