Jquery: load() function not loading options in select tag

Question

I am trying to load the option tags generated by back-end into my select tag when changes are made to either of 2 fields.

Here is the code for front end:

<select id="Events"> </select>

and this is the jQuery:

$(document).ready(function() {
    $("#Dept").on('change', function() {
        var dept = $("#Dept").val();
        var isTech = $(".isTech").val();
        $("#Events").load("/assets/scripts/Events.php?dept=" + dept + "&istech=" + isTech);
    });
    $(".isTech").on('change', function() {
        var dept = $("#Dept").val();
        var isTech = $(".isTech").val();
        $("#Events").load("/assets/scripts/Events.php?dept=" + dept + "&istech=" + isTech);
    });
});

This is not loading any tags, though I checked via URL and the back end is producing required output of option tag(s):

 <option value="56">spray ball</option>

I have checked the back-end and it is generating the appropriate option tags! it's just that these option tags are not loaded in the select tag.

Thanks for the help

you may want to check this http://stackoverflow.com/questions/815103/jquery-best-practice-to-populate-drop-down — Aarati, Mar 22 '17 at 15:25

score -1 · Answer 1 · answered Mar 22 '17 at 15:25

You can't load an ajax result into a select box itself. Try this below.

$(document).ready(function(){
  $("#Dept").on('change', function(){
    var dept = $("#Dept").val();
    var isTech = $(".isTech").val();

    $.get("/assets/scripts/Events.php?dept="+dept+"&istech="+isTech, function(response){ 
        $('#Events').html(response);
    });
  });

  $(".isTech").on('change', function(){
    var dept = $("#Dept").val();
    var isTech = $(".isTech").val();

    $.get("/assets/scripts/Events.php?dept="+dept+"&istech="+isTech, function(response){ 
      $('#Events').html(response);
    });
  });
});

Down-voter, would you mind to share your ideas why it is not the solution? — serdar.sanri, Mar 22 '17 at 16:01

Jquery: load() function not loading options in select tag

1 Answers1