Question

I’m trying to update/save dynamically created html objects using jquery. But in one particular scenario value printed in console and actual html have different values.

Here is the Jquery code.

var span = $(this).children('span').first();    
var choice = span.children('label').eq(1).next('select').val();
console.log(choice);
console.log($(this).html());

The output(truncated) in console looks like this.

Voicemail
....
<label for="id_00-choices">Choices</label> : <select name="00-choices" id="id_00-choices"> <option value="Voicemail">Voicemail</option> <option value="Phone" selected="selected">Phone</option> <option value="Conference">Conference</option> </select> 
....

As is obvious, in html “Phone” is the selected option, but Jquery (correctly) tells me “Voicemail” is the selected option, which I selected manually.

I’m using latest jquery, and I’m using Jquery Dialog for my application. Why am I getting different values, and secondly, can I force the html to change the value of selected option?

Answer 1

$("select").val() gets currently selected value (you said that you selected Voicemail option manually).

If you want to get an option with selected attributed use:

var choice = span.children('label').eq(1).next('select').find("option[selected]").val();