JQuery SelectList Option Changed doesn't refresh

Question

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 had the same problem and found a nice workaround:

var before= $('#selectmenu').html();
$('#selectmenu').html("");
$('#selectmenu').html(before);

If you do this, the select box must be refreshed.