CODEWITHSUNDEEP
jquery
Jean-Philippe
Jean-Philippe

Reputation: 29

JQuery SelectList Option Changed doesn't refresh

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

Upvotes: 3

Views: 2130

Answers (3)

zee
zee

Reputation: 641

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.

Upvotes: 3

KP.
KP.

Reputation: 13730

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/

Upvotes: 1

Kerry Jones
Kerry Jones

Reputation: 21838

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

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

Upvotes: 1

Related Questions