javascript - 将下拉列表更改为其原始状态

Question

我认为有两个下拉列表。通过更改第一个值，我可以更改第二个值。在第一次运行中，使用下面的脚本可以正常工作。 但是当我将第一个下拉列表更改为其他内容时，它将不起作用。我相信，如果我可以更改第二个下拉列表值和文本，然后....恢复到原始状态，那就没问题了。 这是我的代码:

<select id="ddlDepartment">
            <option selected disabled>اselect department</option>
            @foreach (var item in Model)
            {
                <option value="@item.DepartmentTitle">@item.DepartmentTitle</option>
            }
        </select>
    </td>
</tr>

<tr>
    <td>grade</td>
    <td>
        <select id="ddlgrade">
            <option selected disabled="disabled">Select Grade</option>
            <option id="id_bachelor" value="bachelor">bachelor</option>
            <option id="id_Masters" value="Master">Masters</option>
            <option id="Doctorate" value="Doctorate">Doctorate</option>
        </select>

这是我的脚本:

$('#ddlDepartment')
    .change(function() {
        debugger;
        var ddlDepartment = $('#ddlDepartment').val();
        var grade = $('#ddlgrade').val();

        getGrade();

        function getGrade() {
            $('#ddlgrade')
                .change(function() {
                    grade = $('#ddlgrade').val();
                    $.ajax('/AdminPages/showStudents/' + ddlDepartment + '/' + grade)
                        .done(function(data) {
                            $('#lstStudents').html(data);
                        });
                });
        }
    });

我在这里遇到错误:

if ( !( eventHandle = elemData.handle ) ) {
            eventHandle = elemData.handle = function( e ) {

                // Discard the second event of a jQuery.event.trigger() and
                // when an event is called after a page has unloaded
                return typeof jQuery !== "undefined" && jQuery.event.triggered !== e.type ?
                    jQuery.event.dispatch.apply( elem, arguments ) : undefined;
            };
        }

Answer 1

您必须将 getGrade() 函数移到外部。 getGrade() 函数为第二个选择绑定(bind)一个change事件处理程序每次您更改了第一个select.

最终解决方案

$('#ddlgrade').change(function() {
     var ddlDepartment = $('#ddlDepartment').val();
     var grade = $(this).val();
     if(ddlDepartment){
         $.ajax('/AdminPages/showStudents/' + ddlDepartment + '/' + grade)
              .done(function(data) {
              $('#lstStudents').html(data);
          });
     }
     else{
        alert("Please select department first!");
     }
});

请看看您的代码如何工作:

$('#ddlDepartment')
    .change(function() {
        var ddlDepartment = $('#ddlDepartment').val();
        var grade = $('#ddlgrade').val();
        alert(ddlDepartment);
        getGrade();
        function getGrade() {
            $('#ddlgrade')
                .change(function() {
                    grade = $('#ddlgrade').val();
                    alert(grade);
            });
        }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlDepartment">
            <option selected disabled>اselect department</option>
            <option val="1">acb</option>
             <option val="1">acfdb</option>
        </select>

        <select id="ddlgrade">
            <option selected disabled="disabled">Select Grade</option>
            <option id="id_bachelor" value="bachelor">bachelor</option>
            <option id="id_Masters" value="Master">Masters</option>
            <option id="Doctorate" value="Doctorate">Doctorate</option>
        </select>