jQuery change value of select list

Question

I have the following code

<select id="practice_id" name="practice" column="practice" style="width: 200px">
 <option value="">Default</option>
 <option value="1">Test 1</option>
 <option value="2">Test 2</option>
 <option value="3">Test 3</option>
 ...............
</select>

What I need to do, is to change the value of the selected item to one based on a query string number (I can get this value ok)

I am trying to change the value using jQuery, but nothing I've tried seems to work.

$('#practice_id').val('QUERY_STRING_NUMBER');

This doesn't seem to work as the value doesn't change.

I am I getting something wrong here?

Thanks

Answer 1

You need to select the option element and not the select element:

(function($) {
    $('#practice_id').change(function() {
        var val = $(this).val();
        alert(val);
        $('option[value=' + val + ']', this).val('changed');
    });
})(jQuery);

http://jsfiddle.net/PeeHaa/6yre7/

Answer 2

$('#practice_id').val('QUERY_STRING_NUMBER');

This is setting the value of the dropdown, not "changing" the underlining option value.

$(document).ready(function() { $("#practice_id").children().val("-99"); });

This will change the value to -99 on all of the option tags.

http://jsfiddle.net/MejLX/1/

Note: Yes, you can do this via jQuery. However, based on most everyday common scenarios I would think that your server-side script/page would be generating the correct value.