0

I have the following code and it works well in JSfiddle, but it doesn't work properly on my web page. On this page, I have dropdown "B" which is populated based on the selected item in dropdown "A". In case of changing "A" items, values of the second dropdown changed correctly but its default text remains unchanged until I change the selected item in the second dropdown manually.

code:

function get_child() {
$("#child").empty();
$.ajax({
    type: 'POST',
    url: '@Url.Action("Get_child", "Home")',
    dataType: 'json',
    data: { Name: $("#parent").val() },
    success: function (states) {
        $("#child").append('<option value="0"  selected="selected">&nbsp;</option>');
        $.each(states, function (i, state) {
            $("#child").append('<option value="' + state.Text + '">' +
                state.Text + '</option>');
        });             
    },
    error: function (ex) {
    }

});};
Harsh Patel
  • 6,334
  • 10
  • 40
  • 73
Mtsharif
  • 15
  • 5
  • 1
    Check this: https://stackoverflow.com/questions/47824/how-do-you-remove-all-the-options-of-a-select-box-and-then-add-one-option-and-se – Chandan Rajput Sep 14 '17 at 05:45
  • 1
    Also if you have onChanges funtion for first drop down list, you can add part of code in that function as : document.getElementById('secondDropDown').options.length=0; – Chandan Rajput Sep 14 '17 at 05:48
  • Thanks for your hint, but unfortunately that doesn't fix the problem. The values for the second dropdown updates correctly, but it's text remains unchanged until I change it manually. – Mtsharif Sep 15 '17 at 14:24

0 Answers0