javascript - 清除选择选项并将其重置为默认值在 Jquery 中不起作用

Question

我正在第一个的基础上填充我的第二个dropdownlist。因此，当我将第一个下拉列表设置为 --Select-- 时，它不会将我的第二个下拉列表重置为我正在设置的值，也不会清除这些值。

这是我的代码。

function FillStateHeadDetails() {

    var selectedVal = $('#ddlZonalHeadNameAdd').val();

    try {
        $.ajax({
            url: "GET_DATA_BY_STORE.aspx/GetStateHeadDetails",
            dataType: "json",
            type: "POST",
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ selectedVal: selectedVal }),
            async: true,
            processData: false,
            cache: false,
            success: function (response) {

                var retrievedParsedValue = JSON.parse(response.d);

                if (selectedVal == 0) {
                    $('#txtZonalHeadNoAdd').val('');
                   $("#ddlSLPStateHeadAdd").val('');       // clearing here             
                    zonalECNumber = "";
                }
                else {

                    for (var i = 0; i < retrievedParsedValue.Table.length; i++) {
                        $('#txtZonalHeadNoAdd').val(retrievedParsedValue.Table[0]["ZONAL_MOB_NUM"]);
                        zonalECNumber = retrievedParsedValue.Table[0]["ZONAL_EC_NUM"];
                    }

                    var slpStateHead = $("#ddlSLPStateHeadAdd"), options = '';
                    slpStateHead.empty();

                    options += "<option value='0'>--Select--</option>";

                    for (var j = 0; j < retrievedParsedValue.Table1.length; j++) {
                        options += "<option value='" + retrievedParsedValue.Table1[j]["ZONE_ID"] + "'>" + retrievedParsedValue.Table1[j]["STATE_HEAD_NAME"] + "</option>";
                    }
                    slpStateHead.append(options);
                }
            },
            error: function (xhr) {
                alert('Cannot fill the SLP State Head Contact and Emaild ID details now');
            }
        })
    } catch (e) {
    }
}

1st dropdownlist

<select id="ddlZonalHeadNameAdd" runat="server" class="form-control" onchange="return FillStateHeadDetails()"></select>

2nd dropdownlist

 <select id="ddlSLPStateHeadAdd" class="form-control"> 
                                    </select>

Answer 1

在此处添加一个简单的 if 条件:-

function FillStateHeadDetails() {

    var selectedVal = $('#ddlZonalHeadNameAdd').val();

    if(selectedVal == ''){ // i assume first option value is empty

      $("#ddlSLPStateHeadAdd").html('<option value="">--Select--</option>');

    }else{

      //your try-catch code will come here

    }
}

如果你想与文本进行比较，那么:-

function FillStateHeadDetails() {

    var selectedVal = $('#ddlZonalHeadNameAdd').val();

    if($('#ddlZonalHeadNameAdd').text() == '--Select--'){

      $("#ddlSLPStateHeadAdd").html('<option value="">--Select--</option>');

    }else{

      //your try-catch code will come here

    }
}