How can I filter dropdown select option with using jQuery?

Question

I am trying to filter (select name="DepartmentName" id="DepartmentName")according to (select name="HospitalName" id="HospitalName")'s value but it returns me zero item. What I want to do is for a user to select a hospital, then see the departments from that hospital and select one ("DepartmentName"). In other words, I want to filter the departments according to the selected hospital and offer the departments in that hospital as an option. How can I fix this?

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

<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; }

}

I can list the department's names but I can not filter that. when I chose "Medicana" I should list only "Nutrition and Diet" and "dermatology" because "psychiatry " is department of another hospital's department and should not be shown. No output options anymore. Additionally I should not create the option dynamically have to list them help of foreach.

Answer 1

Consider the following.

 $(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>

Added a Data attribute to help create a relationship. I also updated the ID so that there is something to tie to the relationship. When a User makes a change, it hides the items and only allows specific ones to be shown.

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

You can use matcher method of select2 plugin. So,whenever user select any value from 1st select-box you can filter options inside 2nd select-box using $(option[0].outerHTML).attr("value") == rel_ .

Demo Code :

 $(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>