Happydevdays Happydevdays - 25 days ago 5
jQuery Question

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

I have the following code that is used to populate a 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 the Site</option>";
for (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 this is the static HTML code I start out with:

<!--use to populate select after form is 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 i run this code, I can see "CAN" print in the console as the val of the variable that contains my site info
But I can't seem to get it to select the "canada" option (which has the value of "CAN") from the drop down.

EDIT 1

The code won't work but in the console I tried this:

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


to prove that "Canada" has a value of CAN. And now i see the Canada option selected. But none of the answer posted so far are working for me.
:/

I also tried both of these:

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


EDIT 2

This version also 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');
}

Answer

to set the value of a select box using a variable

I suppose, you are actually trying to select the option that has a specified value, use the following approach:

// to remove previously selected option, at first
$('option:selected', 'select[name="site"]').removeAttr('selected');

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

In some cases, the following also should work:

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

Also you should move your "selecting" code into success callback function right after appending, because $.ajax method works asynchronously. So it should look 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