CODEWITHSUNDEEP
ajaxjquery
user1905754
user1905754

Reputation:

Load in div based on choice in selectbox

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.

Upvotes: 0

Views: 496

Answers (4)

Jeff Noel
Jeff Noel

Reputation: 7618

$(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;
        }
    }
}

Never forget the $(document).ready( function(){...}) part; it is what renders your code so it can be triggered.

Upvotes: 0

user1905754
user1905754

Reputation:

Ok I dont get it to work so something is wrong. Its strange becuse there is other similar scripts on the same page that works great.

Upvotes: 0

Techie
Techie

Reputation: 45124

If I understand your question right, what you want to do is according to the selection load the div. check the code below.

$("#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');
  }

});

else you can just load the content right away

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

Read more

Upvotes: 1

Jamiec
Jamiec

Reputation: 136074

Here is the relevant part of the documentation:

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

It says to do it like this:

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

Upvotes: 0

Related Questions