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

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

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

---

您可以使用

filter

筛选第二个选择框的选项。因此，首先需要隐藏所有选项，然后使用过滤器检查

值是否为
1
，然后仅显示该选项

演示代码：
$（“#单元操作”）。更改（功能（e）{
var text=（$（this）.find（“选项：已选定”）.text（）；
//如果索引表示值1,2,3。。
var filter=$（this）.find（“选项：选定”）.index（）
//如果（文本==“蛋白质A”）{
$（'#processparameter选项：not（：first））.hide（）；//隐藏所有not first
$（'#processparameter选项：非（：第一个））.filter（函数（）{
返回$（this）.val（）==过滤器//或1
}).show（）//显示它们
//  }
});

挑选
层析蛋白A
色谱混合模式
对
选择工艺参数
P1
P2
P3
P11
可重用代码：非常感谢您的回答。这肯定有帮助。
    <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>
    

    $(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"){

    }
    });

    });