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
Post a Comment