How to Load page content to div with select box in jquery?

Question

I'm trying to load page content into a div via Ajax when a select option is selected.

This is my code, but it will not work.

$('mySelect').on('change',function(){
 function loadPage(url){
  $("#page").load(url);
}
});

I have a select box with 2 options the values are One.html and Two.html and under that I have a div and want the content from One.html and Two.html to load in the div when the select box changes... Via Ajax any suggestions?

Thanks

user_4281779 · Answer

You're missing the id sign # :

$('mySelect').on('change',function(){

Should be :

$('#mySelect').on('change',function(){
___^

Try to avoid the inline event onchange() and use data-* to store the url param then pass it to the loadPage function inside the change event.

$(function() {
  loadPage("One.html");

  $('#mySelect').on('change', function() {
    loadPage($(this).find(':selected').data('url'));
    //OR
    // $("#page").load( $(this).find(':selected').data('url') );
  });
});

function loadPage(url) {
  $("#page").load(url);
}

user_7969350 · Answer

it's quite simple:

$("#SelectOne").change(function() {
    $("#someDiv").load($(this).val());
});

How to Load page content to div with select box in jquery?

2 Answers