javascript - How can I filter dropdown select option with using jQuery? - Stack Overflow

admin管理员组

文章数量:1435557

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=".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.

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./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.

• javascript
• c#
• jquery
• asp-mvc

Share Improve this question Follow edited May 11, 2021 at 13:48 learningforcs asked May 10, 2021 at 20:55 learningforcslearningforcs 11211 silver badge1010 bronze badges 1

• Comments are not for extended discussion; this conversation has been moved to chat. – Samuel Liew Commented May 14, 2021 at 13:31

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

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./bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/select2/3.5.2/select2.min.css" />
<script src="https://code.jquery./jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare./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>

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./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>

Consider the following.

$(function() {
  $("#HospitalName").change(function() {
    $("#DepartmentName option").hide();
    $("#DepartmentName option[value='" + $(":selected", this).data("rel") + "']").show();
  });
})

<script src="https://cdnjs.cloudflare./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.

本文标签： javascriptHow can I filter dropdown select option with using jQueryStack Overflow