How to select value in jQuery dropdownlist

Question

In this code I'm fetching selected value from the php file and assign it, but it doesn't work every time. Suppose if I refresh it then one value may be assigned and the other one is may be not, sometimes both are not assigned. What is the problem? The selectedcaste.php returns the following:

{"cast":"BC","busrout":"B20"} 

For testing purposes I hardcoded it but I face the same problem.

$.ajax({url:"phpajax/selectedcaste.php",success:function(result){
    var valoresArea=result; // it has the multiple values to set, separated by comma
    var obj = jQuery.parseJSON(valoresArea);

    $('#caste').val(obj.cast).attr("selected", "selected");
    $('#route').val(obj.busrout).attr("selected", "selected");


    //$('#caste').select2("val",obj.cast);
    //$('#route').select2("val",obj.busrout);
}});

here my full java script

$(function(){
    // for loading caste list from database at run time
     var items="";
     $.getJSON("phpajax/caste.php",function(data){
     $.each(data,function(index,item) 
        {

        items+="<option value='"+item.Name+"'>"+item.Name+"</option>";
        });
    $("#caste").html(items); 
  });


    // for loading route  list from database at run time
     var items2="";
     $.getJSON("phpajax/route.php",function(data){
     $.each(data,function(index,item) 
        {

        items2+="<option value='"+item.Name+"'>"+item.Name+"</option>";
        });
    $("#route").html(items2); 
  });



    // assign selected value from records
    $.ajax({url:"phpajax/selectedcaste.php",success:function(result){
    var valoresArea=result; // it has the multiple values to set, separated by comma
    var obj = jQuery.parseJSON(valoresArea);

     $('#caste').val($.trim(obj.cast)).attr("selected", "selected");
     $('#route').val($.trim(obj.busrout)).attr("selected", "selected");


    //$('#caste').select2("val",obj.cast);
    //$('#route').select2("val",obj.busrout);

  }});


});

my html

<select name="caste"  id="caste"  style="width: 100%;">
<!--   <option value="0" selected="selected" >Choose an option...</option>-->

</select>
<select name="route"  id="route"   style="width:100%;">                             

</select>

error

some time select correctly. some time select onely one. some time both are not selected. if i use alert statement it every time it alert correctly but not select properly. i am using bootstrap 2.0 theme. thanks

Answer 1

Instead of -

$('#caste').val(obj.cast).attr("selected", "selected");
$('#route').val(obj.busrout).attr("selected", "selected");

Use only -

$('#caste').val(obj.cast);
$('#route').val(obj.busrout);

DEMO

UPDATE-

You are making 3 ajax request at the same time asynchronously.You can't control order of callbacks when it's asynchronous.

Here is the possibility that your third ajax callback execute before your second and first callback that causing setting the values into the select boxs prior filling options into them.

Hence make sure your first and second callback execute before then your third callback.

Use $.when to handle multiple ajax callback into single callback

$(function () {
    // for loading caste list from database at run time
    var items = "";
    $.when($.getJSON("phpajax/caste.php"), $.getJSON("phpajax/route.php"))
        .done(function (data1, data2) {//execute when both ajax request completed
        var items = "";
        var items2 = "";
        console.log(data1[0],data2[0]);
        $.each(data1[0], function (index, item) {
            items += "<option value='" + item.Name + "'>" + item.Name + "</option>";
        });
        $("#caste").html(items);//filling 1'st select
        $.each(data2[0], function (index, item) {
            items2 += "<option value='" + item.Name + "'>" + item.Name + "</option>";
        });
        $("#route").html(items2);//filling 2'nd select

        //Making third request for setting values
        $.ajax({url:"phpajax/selectedcaste.php",success:function(result){
        var valoresArea=result; // it has the multiple values to set, separated by comma
        var obj = jQuery.parseJSON(valoresArea);

        $('#caste').val(obj.cast);
        $('#route').val(obj.busrout);
      }});
});

Answer 2

Instead of

$('#caste').val(obj.cast).attr("selected", "selected");

Just use

$('#caste').val(obj.cast);

Or(sometimes problem occurs like in your case due to white spaces) use $.trim() to remove white spaces as shown :-

$('#caste').val($.trim(obj.cast));