如何使用 jQuery 过滤下拉选择选项？
Posted
技术标签:
【中文标题】如何使用 jQuery 过滤下拉选择选项？【英文标题】：How can I filter dropdown select option with using jQuery? 【发布时间】：2021-08-01 06:41:21 【问题描述】：我正在尝试根据 (select name="HospitalName" id="HospitalName") 的值过滤 (select name="DepartmentName" id="DepartmentName")，但它返回零项。我想要做的是让用户选择一家医院，然后查看该医院的部门并选择一个（“部门名称”）。换句话说，我想根据所选医院过滤科室，并提供该医院的科室作为选项。我该如何解决这个问题？
<div class="input-group">
<label class="label">Hospital Name</label>
<div class="rs-select2 js-select-simple select--no-search" style="margin-top:30px;margin-left:-120px;">
<select name="HospitalName" id="HospitalName">
<option disabled="disabled" selected="selected">Choose option</option>
@foreach (var item in Model.hospitals)
<option value="@item.Id" data-rel ="@item.Id">@item.Name</option>
</select>
<div class="select-dropdown"></div>
</div>
</div>
<div class="input-group">
<label class="label">Department Name</label>
<div class="rs-select2 js-select-simple select--no-search" style="margin-top:30px;margin-left:-150px;">
<select name="DepartmentName" id="DepartmentName">
<option disabled="disabled" selected="selected">Choose option</option>
@foreach (var item in Model.departments)
<option value="@item.Id" >@item.Name</option>
</select>
<div class="select-dropdown"></div>
</div>
脚本代码
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(function()
$("#HospitalName").change(function()
$("#DepartmentName option").hide();
$("#DepartmentName option[id^='" + $(":selected", this).data("rel") + "']").show();
型号
public class ViewModel2
public Patient patients;
public Illness illness;
public List<Doctor> doctors get; set;
public List<Illness> illnesses get; set;
public List<Hospital> hospitals get; set;
public List<DAppDate> dAppDates get; set;
public List<Department> departments get; set;
public List<Appointment> appointments get; set;
public Hospital hospital get; set;
我可以列出部门名称，但无法过滤。当我选择“Medicana”时，我应该只列出“Nutrition and Diet”和“dermatology”，因为“psychiatry”是另一家医院的科室，不应该显示。没有输出选项了。此外，我不应该动态创建选项，必须列出它们对 foreach 的帮助。
【问题讨论】：
评论不用于扩展讨论；这个对话是moved to chat。 【参考方案1】：你可以使用select2插件的matcher方法。因此，每当用户从第一个选择框中选择任何值时，您都可以使用 $(option[0].outerhtml).attr("value") == rel_ 过滤第二个选择框中的选项。
演示代码：
$(function()
$("select").select2();
$("#HospitalName").change(function()
//get rel value
var rel_ = $(this).find("option:selected").data("rel")
$("#DepartmentName").select2("val", ""); //remove any selected value
//intialze
$("#DepartmentName").select2(
matcher: function(term, text, option)
//only show options where rel = value ..
return $(option[0].outerHTML).attr("value") == rel_
)
);
)<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<div class="input-group">
<label class="label">Hospital Name</label>
<div class="rs-select2 js-select-simple select--no-search" style="">
<select name="HospitalName" id="HospitalName" style="width:100px">
<option disabled="disabled" selected="selected">Choose option</option>
<option value="01" data-rel="hosp-1">Hosp 1</option>
<option value="02" data-rel="hosp-2">Hosp 2</option>
<option value="03" data-rel="hosp-3">Hosp 3</option>
</select>
<div class="select-dropdown"></div>
</div>
</div>
<div class="input-group">
<label class="label">Department Name</label>
<div class="rs-select2 js-select-simple select--no-search" style="">
<select name="DepartmentName" id="DepartmentName" style="width:100px">
<option disabled="disabled" selected="selected">Choose option</option>
<option value="hosp-1">Item 1 h1</option>
<option value="hosp-1">Item 2 h1</option>
<option value="hosp-2">Item 3 h2</option>
<option value="hosp-2">Item 4 h2</option>
</select>
<div class="select-dropdown"></div>
</div>
</div>【讨论】：
【参考方案2】：var $select1 = $('#HospitalName'),
$select2 = $('#DepartmentName'),
$options = $select2.find('option');
$select1.on('change', function()
var hosp = $(this).find("option:selected").data("rel");
$select2.html($options.filter('[data-hosp="' + hosp + '"]'));
$select2.val($select2.find("option:first").val());
).trigger('change');<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group">
<label class="label">Hospital Name</label>
<div class="rs-select2 js-select-simple select--no-search" style="">
<select name="HospitalName" id="HospitalName">
<option disabled="disabled" selected="selected">Choose option</option>
<option value="01" data-rel="hosp-1">Hosp 1</option>
<option value="02" data-rel="hosp-2">Hosp 2</option>
<option value="03" data-rel="hosp-3">Hosp 3</option>
</select>
<div class="select-dropdown"></div>
</div>
</div>
<div class="input-group">
<label class="label">Department Name</label>
<div class="rs-select2 js-select-simple select--no-search" style="">
<select name="DepartmentName" id="DepartmentName">
<option disabled="disabled" selected="selected">Choose option</option>
<option value="Item 1" data-hosp="hosp-1">Item 1</option>
<option value="Item 1" data-hosp="hosp-2">Item 2</option>
<option value="Item 1" data-hosp="hosp-3">Item 3</option>
<option value="Item 1" data-hosp="hosp-1">Item 4</option>
<option value="Item 1" data-hosp="hosp-2">Item 5</option>
<option value="Item 1" data-hosp="hosp-3">Item 6</option>
<option value="Item 1" data-hosp="hosp-1">Item 7</option>
<option value="Item 1" data-hosp="hosp-2">Item 8</option>
<option value="Item 1" data-hosp="hosp-3">Item 9</option>
</select>
<div class="select-dropdown"></div>
</div>
</div>【讨论】：
我试过你扔的代码，没有任何改变。 @learningwoman 点击蓝色的运行代码 sn -p 按钮你可以看到它按预期工作了吗？ 是的，很抱歉，这正是我想要的，但我无法在我的代码中运行，在“data-rel”中我必须发送我的医院 ID，在 data-hosp 中我必须抓住我的部门的隐藏（医院ID）。我错了吗？ @learningwoman 是的，没错，data-hosp 值必须与 Hospital 下拉菜单中的 data-rel 值（医院）相同 我为尝试执行了您的代码，但在我在在线 html 编译器中尝试它之后，它给了我“未找到结果”，它像我们预期的那样工作。我的代码有什么问题？我编辑了我的问题，并在问题中添加了输出的样子。【参考方案3】：考虑以下内容。
$(function()
$("#HospitalName").change(function()
$("#DepartmentName option").hide();
$("#DepartmentName option[value='" + $(":selected", this).data("rel") + "']").show();
);
)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group">
<label class="label">Hospital Name</label>
<div class="rs-select2 js-select-simple select--no-search" style="">
<select name="HospitalName" id="HospitalName">
<option disabled="disabled" selected="selected">Choose option</option>
<option value="01" data-rel="hosp-1">Hosp 1</option>
<option value="02" data-rel="hosp-2">Hosp 2</option>
<option value="03" data-rel="hosp-3">Hosp 3</option>
</select>
<div class="select-dropdown"></div>
</div>
</div>
<div class="input-group">
<label class="label">Department Name</label>
<div class="rs-select2 js-select-simple select--no-search" style="">
<select name="DepartmentName" id="DepartmentName">
<option disabled="disabled" selected="selected">Choose option</option>
<option value="hosp-1" id="hosp-1-item-1">Item 1</option>
<option value="hosp-1" id="hosp-2-item-2">Item 2</option>
<option value="hosp-1" id="hosp-3-item-3">Item 3</option>
<option value="hosp-2" id="hosp-1-item-4">Item 4</option>
<option value="hosp-2" id="hosp-2-item-5">Item 5</option>
<option value="hosp-2" id="hosp-3-item-6">Item 6</option>
<option value="hosp-3" id="hosp-1-item-7">Item 7</option>
<option value="hosp-3" id="hosp-2-item-8">Item 8</option>
<option value="hosp-3" id="hosp-3-item-9">Item 9</option>
</select>
<div class="select-dropdown"></div>
</div>
</div>添加了一个数据属性来帮助创建关系。我还更新了 ID，以便与关系相关联。当用户进行更改时，它会隐藏项目并只允许显示特定的项目。
【讨论】：
我编辑了问题，请想想我写的东西。 @learningwoman 我查看了您的编辑。他们没有提供进一步的见解或例子。请查看我发布的答案，其中显示了一些示例 HTML，其中填充了我必须猜测的详细信息。 我已经尝试过了，没有任何改变。我尝试编辑了问题，您可以查看详细信息。 无法跨浏览器隐藏选项。全部不支持 @learningwoman 看起来您正在使用 Select2 插件，所以我的回答根本不起作用。您需要从 Select2 对象中收集选定的选项，并使用该值来调整第二个 Select2 对象。请提供一个最小的、可重复的示例：***.com/help/minimal-reproducible-example以上是关于如何使用 jQuery 过滤下拉选择选项？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 javascript/jquery 在选择下拉菜单中启用/禁用引导选项