javascript - how to set value and have the right option 'selected" in a select box using jquery -


i have following code used populate select box :

$(document).ready(function(){     //populate site list.     $.ajax({               url:"<?php echo site_url('site/sitelist');?>",               type:'post',               datatype:'json',               success: function(res) {             //loop through results             var htmlstring = "<option value='' disabled selected>select site</option>";             (var key in res) {             if (res.hasownproperty(key)) {                     //console.log(key + " -> " + res[key]['site_abbrev']);                     htmlstring += "<option value=" + res[key]['site_abbrev'] + ">" + res[key]['name'] + "</option>";                 }              }              $('#site').append(htmlstring);                },            error: function(xhr, req, err) {              var err = eval("(" + xhr.responsetext + ")");              console.log(err.message);           }     });      var $site_val = $('#hidden_site').val();     console.log($site_val);     if ($site_val !== 'undefined') {         $('#site').val($site_val);       }   }); 

and static html code start out with:

   <!--use populate select after form displayed -->      <input type="hidden" id="hidden_site" name="hidden_site" value="<?php echo($details['site']);?>"/>                                                    <select class="form-control" placeholder="site:" name="site" id="site">      </select> 

when run code, can see "can" print in console val of variable contains site info can't seem select "canada" option (which has value of "can") drop down.

edit 1

the code won't work in console tried this:

 $("#site option[value='can'").prop('selected',true) 

to prove "canada" has value of can. , see canada option selected. none of answer posted far working me. :/

i tried both of these:

    $('#site option[value="' + $site_val + '"]').prop('selected', true);     //$('#site option[value="' + $site_val + '"]').attr('selected','selected'); 

edit 2

this version fails.

var $site_val = $('#hidden_site').val(); console.log($site_val);  //prints can if ($site_val !== 'undefined') {     $('#site option[value="' + $site_val + '"]').change();           //$('#site option[value="' + $site_val + '"]').prop('selected', true);     //$('#site option[value="' + $site_val + '"]').attr('selected','selected'); } 

to set value of select box using variable

i suppose, trying select option has specified value, use following approach:

// remove selected option, @ first $('option:selected', 'select[name="site"]').removeattr('selected');  $('#site option[value="' + $site_val + '"]').prop('selected', true); 

in cases, following should work:

$('#site option[value="' + $site_val + '"]').attr('selected','selected'); 

also should move "selecting" code success callback function right after appending, because $.ajax method works asynchronously. should like:

... $('#site').append(htmlstring); var $site_val = $('#hidden_site').val(); console.log($site_val);  //prints can if ($site_val !== 'undefined') {        $('option:selected', 'select[name="site"]').removeattr('selected');     $('#site option[value="' + $site_val + '"]').prop('selected', true);     //$('#site option[value="' + $site_val + '"]').attr('selected','selected'); }  ... 

Comments

Popular posts from this blog

sql server - Cannot query correctly (MSSQL - PHP - JSON) -

php - trouble displaying mysqli database results in correct order -

C++ Linked List -