Connect two drop downs in jquery

I have two dropdown in the same page. If I select some data from the first filter I get the filtered value. Now If I select some data from the second dropdown the first drop down value will go away.

For example my first drop down has these values

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

My second drop down has

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

What is happening When I select the department it displays all the data related to the department. Now If I select the second filter for grade B then it displays all the data related grade B only. So It's not showing the previous filter.

What I need here is:

  1. If I select the department mechanical it should display all the data related to the department.

  2. If I select Grade then it should display all the data related to the grades also.

  3. And I need one more feature to be added if I want to see in the mechanical department how many of them are in Grade B but that is not working .

Point 1 and 2 are working. Point 3 is not working.

My script is

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


How should I connect these two dropdowns?

I am adding my entire HTML page

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

1 answer

  • answered 2020-07-14 17:48 sonic

    I think there is multiple way of doing that. It depends on your UI.

    For example you can combine those 2 selects using checkbox. When checkbox is checked than you should call another method in your backend instead one of those 2. Its easier to prepare it on backend. Of course if backend is in your hands you can prepare another method.

    If you are only on front-end then you can see that you have common department field and grade. So either way... Filtering results from department by filter "GRADES", hiding those rows that has not value specified in filter. You can use data attribute on your tr and just traversing through them and checking. You can also go the other way around the same thing but checking if any tr consist of your department name if there are multiple departments attached to user, for example data-department='computer, electronic. You can develop those 2 methods and apply them independently to those 2 selects. But yeah you see... its seems to much maybe... Therefore it depends from your UI solution...