Question

I’m using this code on the close function of a jQuery UI dialog:

close: function() {
                $('#type').append('<option value="99">'+ typename.val() +'</option>');
                $('#type option:last').attr("selected", true).siblings("option").removeAttr("selected");
                typename.val( "" ).removeClass( "ui-state-error" );
            }

The 99 is just a placeholder to see if works. Before closing this is how select looks like:

<select style="opacity: 0;" id="type" name="tipo">
    <option value="1" selected="selected">Particular</option>
    <option value="2">Company</option>
    <option value="">Add new</option>
</select>

And after close:

<select style="opacity: 0;" id="type" name="tipo">
    <option value="1">Particular</option>
    <option value="2">Company</option>
    <option value="">Add new</option>
<option value="99">Test</option></select>

So, removes the selected but it doesn’t add the selected. However if I try to alert $(‘#type’).val() it shows 99. What’s wrong here?

Answer 1

If you are using jQuery 1.6+, try this.

$('#type').prop('selectedIndex', $('#type option').length - 1);

OR

$("#type option[value='99']").attr("selected", "selected");

That is,

close: function() {
    $('#type').append('<option value="99">' + typename.val() + '</option>');
    $('#type').prop('selectedIndex', $('#type option').length - 1);
    typename.val("").removeClass("ui-state-error");
}