如何使用 jQuery 過濾下拉 select 選項？

Question

我正在嘗試根據 (select name="HospitalName" id="HospitalName") 的值過濾 (select name="DepartmentName" id="DepartmentName")，但它返回給我零項。 我要做的是讓用戶到 select 一家醫院，然后查看該醫院的科室和 select 一個（“部門名稱”）。 換句話說，我想根據所選醫院過濾科室，並提供該醫院的科室作為選項。 我怎樣才能解決這個問題？

<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();

model

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”是另一家醫院的科室，不應該顯示。 不再有 output 選項。 此外，我不應該動態創建選項，必須列出它們對 foreach 的幫助。

Answer 1

考慮以下。

 $(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，以便與關系相關聯。 當用戶進行更改時，它會隱藏項目並只允許顯示特定的項目。

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

Answer 3

您可以使用select2插件的matcher方法。 因此，每當用戶 select 來自第一個選擇框的任何值時，您都可以使用$(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>