返回从数据库中填充的第二个下拉列表的筛选列表

Question

我有两个下拉列表1是从做出选择的用户填充的，另一个是从数据库填充的，但第二个列表是根据第一个列表的选择进行过滤的。

第二个列表的值来自数据库，当从第一个下拉列表中选择一个选项时，代码应该检查选择的文本，并根据附加到文本选择的值填充第二个名单例如：色谱法蛋白质A的值为1，我想过滤值为1的工艺参数并显示它们
这是我迄今为止所尝试的：HTML:

<select class="form-control form-control-sm" onchange="unitChange(this)" id="unit-operation">
<option selected disabled value="default">Select</option>
<option>Chromatography-Protein A</option>
<option>Chromatography-Mixed Mode</option>
<option>Yes</option>

<select  class="form-control form-control-sm" id="processparameter">
<option selected= "selected" value="default">Select Process Parameter</option>
{% for pp in pp %}
<option value="{{pp.unitoperation_id}}">{{pp.processparameter_name}}</option>
{% endfor %}
</select>
<div class="p-3"></div>

JAVASCRIPT:

$(document).ready(function() {
var options = $("#processparameter").html();
$("#unit-operation").change(function(e) {
var text = ($(this).find("option:selected").text());
alert(text);
$("#processparameter").html(options);
if(text === "Chromatography-Protein A"){
}
});
});

Answer 1

您可以使用filter来过滤第二个选择框的选项。因此，您首先需要隐藏所有选项，然后使用filter并检查value是否为1，然后仅显示该选项。

演示代码 ：

$("#unit-operation").change(function(e) {
var text = ($(this).find("option:selected").text());
//if index denotes the value 1,2,3..
var filter = $(this).find("option:selected").index()
// if (text === "Chromatography-Protein A") {
$('#processparameter option:not(:first)').hide(); //hide all not first
$('#processparameter option:not(:first)').filter(function() {
return $(this).val() == filter //or 1
}).show() //show them
//  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control form-control-sm" id="unit-operation">
<option selected disabled value="default">Select</option>
<option>Chromatography-Protein A</option>
<option>Chromatography-Mixed Mode</option>
<option>Yes</option>
</select>
<select class="form-control form-control-sm" id="processparameter">
<option selected="selected" value="default">Select Process Parameter</option>
<option value="1">P1</option>
<option value="2">P2</option>
<option value="3">P3</option>
<option value="1">P11</option>
</select>