ajax - Load in div based on choice in selectbox

Question

I have an box in Page1 with some different alternatives and below this a div where I want to load in content (different divs) from an external page (Page2) based on choosen alternative.

Page1

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

Page2

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

I found THIS POST and tried figure out how to use the code and ended up with this:

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

Does anybody know what I have done wrong?

Thanks.

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

$(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(){...})部分；它是渲染您的代码的原因，因此可以触发它。

Answer 3

好的，我无法正常工作，所以出了点问题。这很奇怪，因为在同一页面上还有其他类似的脚本效果很好。

Answer 4

这是文档的相关部分：

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");
});