JQuery SelectList Option Changed doesn't refresh

Question

Hi.

I have this select list:

<select url="/Admin/SubCategories" name="TopParentId" id="ParentList">
  <option value="">Please select a parent category</option>
  <option value="1" selected="selected">New Store</option>
  <option value="2">Extensions</option>
  <option value="3">Remodel</option>
  <option value="4">Bespoke Signage</option>
  <option value="5">Tactical Signage</option>
  <option value="6">Size Chart</option>
  <option value="7">Contact Info</option>
</select>

As you can see the option 1 is marked as selected. When I change the selection, I use this code to do an ajax call to get some values to populate a new select list:

$("#ParentList").unbind("change");
$("#ParentList").change(function() {
    var itemId = $(this).val();
    var url = $(this).attr("url");
    var options;

    $.getJSON(url, itemId, function(data) {
        var defaultoption = '<option value="0">Please select a sub-category</option>';
        options += defaultoption;

        $.each(data, function(index, optionData) {
            var option = '<option value="' + optionData.valueOf + '">' + optionData.Text + '</option>';

            options += option;
        });

        $("#SubParentList").html(options);
    });        
});

My problem is that whenever I change the selection, the itemId is always the id of option 1, because it is marked as selected. It doesn't pick up the value of the option it is being changed too.

Can someone please enlighten me of their knowledge.

Regards,

Jean-Philippe

Answer 1

I think this is what you need -- get the selected option value, try

var itemId = $(this).find('option:selected').val();

Answer 2

I believe your problem lies elsewhere. I just tested your code (excluding the JSON) and itemId is being set to the selected item as expected.

var itemId = $(this).val(); is getting the correct value on change.

Note that I'm assuming you have wrapped your js code above in $(document).ready(function(){});

Working example of getting value: http://jsfiddle.net/aqHrc/