У меня есть два раскрывающихся списка на одной странице. Если я выберу некоторые данные из первого фильтра, я получу отфильтрованное значение. Теперь, если я выберу некоторые данные из второго раскрывающегося списка, первое раскрывающееся значение будет 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>
Что происходит Когда я выбираю отдел, он отображает все данные, относящиеся к отделу. Теперь, если я выберу второй фильтр для оценки B, он отобразит только все данные, связанные с оценкой B. Таким образом, он не показывает предыдущий фильтр.
Мне здесь нужно:
Если я выберу механический отдел, он должен отобразить все данные, относящиеся к отделу.
Если я выберу «Оценка», он также должен отобразить все данные, связанные с оценками.
И мне нужно добавить еще одну функцию, если Я хочу увидеть в механическом отделе, сколько из них находится в Уровне 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>