Jquery append option to select and get the selected value

Question

Having trouble with this part. I have a select populated with asp.net mvc and 2 other empty select that is populated by jquery

<select id="Type" onchange="GetClassification(this.value);">
    @foreach (var item in Type)
    {
      <option value="@item.TypeID">@item.TypeName</option>
    }
</select>

<select id="Classification" onchange="GetDescription(this.value);">
</select>

<select id="Description" onchange="GetDescriptionTips(this.value);">
</select>

So based on first select it populates the sencond, based on second it populates the third. First one populates right, second one populates right, third one doesn't populate on document ready.

   $(document).ready(function () {
      $(function () {
         var type = $("#Type option:selected").val();
         GetClassification(type);
      });
    });

    function GetClassification(typeID) {
        $.ajax({
            type: 'GET',
            url: '/types/Classification',
            data: { typeID: typeID },
            cache: false,
            success: function (data) {
                $('#Classification option').remove();
                $.each(data, function (index, val) {
                    var optionTag = $('<option></option>');
                    $(optionTag).val(val.ClassificationID).text(val.ClassificationName);
                    $('#Classification').append(optionTag);
                });
            }
        });
    var classification = $("#Classification option:selected").val();
    GetDescription(classification);
}

function GetDescription(classificationID) {
    $.ajax({
        type: 'GET',
        url: '/types/Description',
        data: { classificationID: classificationID },
        cache: false,
        success: function (data) {
            $('#Description option').remove();
            $.each(data, function (index, val) {
                var optionTag = $('<option></option>');
                $(optionTag).val(val.DescriptionID).text(val.DescriptionName);
                $('#Description').append(optionTag);
            });
        }
    });
}

After load page, if I select second one it changes the third one right, but if change the first, it only changes the second. What I need is on load populate the second and third, then on change the first, re populate the second and third, and on change the second re-populate the third.

I can see it doesn't assign selected on any stage, so I am not sure if need assign it.

Hope I explained good.

Any help will be appreciated.

Answer 1

First of all try to follow this Don't repeat yourself , here is simple algo:

1.Choose all selects
2.Create only one ajax function and pass params like url, data, etc to it
3.In success function proccess your response from the server
4.find all next selects and clean them up or remove options as u wish

good luck!

Answer 2

Since you are using jQuery, try using the .on('chang', function(){...) event handler. Because you are changing the DOM and the on() method can detect the change event even the DOM changed after document ready.