在 jquery 中連接兩個下拉菜單

Question

我在同一頁面中有兩個下拉列表。 如果我 select 來自第一個過濾器的一些數據，我會得到過濾后的值。 現在，如果我 select 來自第二個下拉列表的一些數據，第一個下拉值將 go 離開。

例如我的第一個下拉菜單有這些值

 <select class="form-control"id="oneFilter">
                                <option value="" style="display:none;">Department</option>
                                <option value="Computer">Computer</option>
                                <option value="Electrical">Electrical</option>
                                <option value="Civil">Civil</option>
                                <option value="Mechanical">Mechanical</option>

                            </select>

我的第二個下拉菜單有

<select class="form-control"id="twoFilter">
                                <option value="" style="display:none;">Grades</option>
                                <option value="A">A</option>
                                <option value="B">B</option>
                                <option value="C">C</option>
                                <option value="D">D</option>

                            </select>

發生了什么當我 select 部門時，它顯示與部門相關的所有數據。 現在如果我 select 是 B 級的第二個過濾器，那么它只顯示與 B 級相關的所有數據。 所以它沒有顯示以前的過濾器。

我在這里需要的是：

1. 如果我 select 部門機械它應該顯示與部門相關的所有數據。

2. 如果我 select Grade 那么它應該顯示所有與等級相關的數據。

3. 如果我想在機械部門查看其中有多少是 B 級，我還需要添加一項功能，但這不起作用。

第 1 點和第 2 點有效。 第 3 點不起作用。

我的腳本是

<script>
    $("#oneFilter").on('change', function () {
        var dropdownvalue = document.getElementById("oneFilter")
        var selectOne = dropdownvalue.options[dropdownvalue.selectedIndex].value
        $.ajax({
            type: 'POST',
            url: '/filter1/filter',
            data: {
                'selectedone': selectOne
            },
            success: function (result) {
                
            }
        })
       

    })
</script>
<script>
    $("#twoFilter").on('change', function () {
        var dropdownvalue = document.getElementById("twoFilter")
        var selectTwo = dropdownvalue.options[dropdownvalue.selectedIndex].value
        $.ajax({
            type: 'POST',
            url: '/filter2/filter',
            data: {
                'selectedtwo': selectTwo
            },
            success: function (result) {
                
            }
        })
        
    })
</script>

我應該如何連接這兩個下拉菜單？

我正在添加我的整個 HTML 頁面

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!--JS files-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container col-md-offset-1 list">
    <h2 class="grey_text text-center">Students List</h2>

    <div class="row-fluid top-space-20">
        <table id="table" style="table-layout: width: 800%" class="table table-striped">
            <thead>
                <tr>
                    <th>Student ID</th>
                    <th>Student Name</th>
                    <th>Student Email</th>
                    <th>Department
                        <select class="form-control"id="oneFilter">
                            <option value="" style="display:none;">Department</option>
                            <option value="Computer">Computer</option>
                            <option value="Electrical">Electrical</option>
                            <option value="Civil">Civil</option>
                            <option value="Mechanical">Mechanical</option>

                        </select>
    </div>
    </select>

    </th>
    <th>Status
        <select class="form-control"id="twoFilter">
            <option value="" style="display:none;">Grades</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>

        </select>
    </div>
</div>

    </th>

    </tr>
    </thead>
    <tbody>
        {% for each_student in result %}
        <tr>
            <td>{{ each_student.student_id }}</td>

            <td >{{ each_student.student_email }}</td>
            <td>{{ each_student.student_department }}</td>
            <td >{{ each_student.student_grade }}</td>
        </tr>
        {% endfor %}
    </tbody>
    </table>
</div>

</div>
</div>
<script>
    $("#oneFilter").on('change', function () {
        var dropdownvalue = document.getElementById("oneFilter")
        var selectOne = dropdownvalue.options[dropdownvalue.selectedIndex].value
        $.ajax({
            type: 'POST',
            url: '/filter1/filter',
            data: {
                'selectedone': selectOne
            },
            success: function (result) {

            }
        })
        $(".list").empty();

    })
</script>
<script>
    $("#twoFilter").on('change', function () {
        var dropdownvalue = document.getElementById("twoFilter")
        var selectTwo = dropdownvalue.options[dropdownvalue.selectedIndex].value
        $.ajax({
            type: 'POST',
            url: '/filter2/filter',
            data: {
                'selectedtwo': selectTwo
            },
            success: function (result) {

            }
        })
        $(".list").empty();
    })
</script>

Answer 1

我認為有多種方法可以做到這一點。 這取決於您的用戶界面。

例如，您可以使用復選框組合這兩個選擇。 當復選框被checked時，您應該在后端調用另一個方法，而不是其中一個。在后端准備它更容易。 當然，如果后端在您手中，您可以准備另一種方法。

如果你只是在前端，那么你可以看到你有共同的department領域和grade 。 所以無論哪種方式......通過過濾器“GRADES”過濾部門的結果，隱藏那些沒有在過濾器中指定值的行。 您可以在tr上使用data屬性，然后遍歷它們並進行檢查。 您也可以 go 以其他方式解決同一件事，但如果用戶有多個部門，例如data-department='computer, electronic ，請檢查是否有任何 tr 包含您的部門名稱。 您可以開發這兩種方法並將它們獨立應用於這兩種選擇。 但是，是的，你看......它似乎很可能......因此它取決於你的 UI 解決方案......