Question

我在Page1中有一个框，有一些不同的替代方案，在这下面我想根据选择的替代方式从外部页面（页面2）加载内容（不同的div）。

第1页

<select id="choose_alternative">
<option> Books </option>
<option> Paper </option>
</select>

2页

<div id="Book_div">Content</div>
<div id="Paper_div">Content</div>

我找到THIS POST并尝试弄清楚如何使用代码并最终得到：

$("#choose_alternative").change(function(){
  $("#show_alternative").load( $(Page2.html #Book_div).val() );
  $("#show_alternative").load( $(Page2.html #Paper_div).val() );
});

有人知道我做错了吗？

感谢。

Answer 1

如果我理解你的问题，你想要做的是根据选择加载div。检查下面的代码。

$("#choose_alternative").change(function(){

  var choose_alternative  = $("#choose_alternative option:selected").text();

  if(choose_alternative == 'Books'){
     $("#show_alternative").load('Page2.html #Book_div');
  }
  else if(choose_alternative == 'Paper'){
     $("#show_alternative").load('Page2.html #Paper_div');
  }

});

否则您可以立即加载内容

$("#choose_alternative").change(function(){
  $("#show_alternative").load("Page2.html #Book_div");
  $("#show_alternative").load("Page2.html #Paper_div");
});

Answer 2

以下是文档的相关部分：

http://api.jquery.com/load/#loading-page-fragments

它说是这样做的：

$("#choose_alternative").change(function(){
  $("#show_alternative").load("Page2.html #Book_div");
  $("#show_alternative").load("Page2.html #Paper_div");
});

Answer 3

好的，我不能让它工作，所以有些不对劲。这很奇怪，因为在同一页面上还有其他类似的脚本可以运行得很好。

Answer 4

$(document).ready(function (){    
    $('#choose_alternative').change(function(){
        $show_alternative = $('#show_alternative');
        var selectedElement = $('#choose_alternative :selected');

        switch($(selectedElement).val())
        {
             case " Books ":
                  $show_alternative.load('Page2.html #Book_div');
                  break;
             case " Paper ":
                  $show_alternative.load('Page2.html #Paper_div');
                  break;
             default:
                  $show_alternative.html('No option selected.');
                  break;
        }
    }
}

永远不要忘记$(document).ready( function(){...})部分;它是呈现代码的原因，可以触发它。

根据选择框中的选项加载div

4 个答案: