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

you want to add options in dropdown?

Ehsan Sajjad
– Ehsan Sajjad

2014-09-08 05:29:33 +00:00
Commented Sep 8, 2014 at 5:29 — Ehsan Sajjad
– Ehsan Sajjad, Commented Sep 8, 2014 at 5:29

vikrant singh · Accepted Answer · 2014-09-08 06:46:52Z

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

edited Sep 8, 2014 at 6:46

answered Sep 8, 2014 at 5:24

vikrant singh

2,1111 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

vikrant singh Over a year ago

Please share your html to

Ravindr Over a year ago

hai . realy i dont know how to share code. the comment so its to big.. guid me how to share code .... <div id="divcast"> <select name="caste[]" multiple="multiple" id="caste" value="{$caste}" style="width: 100%;">  </select> </div>

vikrant singh Over a year ago

share code by updating your question , share only required code not all and also post the error you are getting

vikrant singh Over a year ago

Are you not adding any option in your select on your server side code??.share your code for adding option :)

Ravindr Over a year ago

sir in my code the list is added dynamicly. is it affect the selection process?

|

Kartikeya Khosla · Accepted Answer · 2014-09-08 05:29:57Z

0

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

edited Sep 8, 2014 at 5:29

answered Sep 8, 2014 at 5:24

Kartikeya Khosla

18.9k8 gold badges46 silver badges70 bronze badges

1 Comment

Ravindr Over a year ago

problem continued sir... <div id="divcast"> <select name="caste[]" multiple="multiple" id="caste" value="{$caste}" style="width: 100%;">  </select> </div>

Collectives™ on Stack Overflow

How to select value in jQuery dropdownlist

2 Answers 2

DEMO

UPDATE-

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

UPDATE-

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related