Saya mencoba memfilter (pilih nama="DepartmentName" id="DepartmentName") menurut (pilih nama="HospitalName" id="HospitalName") nilai tetapi mengembalikan saya nol item. Yang ingin saya lakukan adalah agar pengguna memilih rumah sakit, lalu melihat departemen dari rumah sakit itu dan memilih satu ("NamaDepartemen"). Dengan kata lain, saya ingin menyaring departemen menurut rumah sakit yang dipilih dan menawarkan departemen di rumah sakit itu sebagai pilihan. Bagaimana saya bisa memperbaiki ini?

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

kode skrip

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

}

Saya dapat mencantumkan nama departemen tetapi saya tidak dapat memfilternya. ketika saya memilih "Medicana" saya harus mencantumkan hanya "Nutrisi dan Diet" dan "dermatologi" karena "psikiatri" adalah departemen departemen rumah sakit lain dan tidak boleh ditampilkan. Tidak ada opsi keluaran lagi. Selain itu, saya tidak boleh membuat opsi secara dinamis harus mencantumkannya bantuan foreach.

enter image description here

view-source

0
learningwoman 10 Mei 2021, 23:55

3 jawaban

Jawaban Terbaik

Anda dapat menggunakan matcher metode plugin select2 . Jadi, setiap kali pengguna memilih nilai apa pun dari kotak pilih pertama, Anda dapat memfilter opsi di dalam kotak pilih ke-2 menggunakan $(option[0].outerHTML).attr("value") == rel_ .

Kode Demo :

$(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>
1
Swati 12 Mei 2021, 16:27

Pertimbangkan berikut ini.

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

Menambahkan atribut Data untuk membantu membuat hubungan. Saya juga memperbarui ID sehingga ada sesuatu untuk mengikat hubungan. Saat Pengguna membuat perubahan, itu menyembunyikan item dan hanya mengizinkan item tertentu untuk ditampilkan.

1
Twisty 11 Mei 2021, 02:39
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>
1
futureweb 10 Mei 2021, 23:04