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()函数绑定change事件处理程序，second选择 EVERYTIME ，您更改了第一个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!");
     }
});

请查看您的代码是如何运作的：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: