如何在使用下拉列表过滤后保留多选框中的选定值 [英] How to keep selected values from a Multi Select Box after filtering with a Dropdown

问题描述

我目前有一个建筑物的下拉列表，可以过滤多个选择框，其中各个房间按其各自的建筑物分组。

I currently have a dropdown with Buildings that filters a Multi Select Box with various Rooms grouped by their respective Building.

一切都很好，除非我选择或在多选框中有预先选择的值，我使用下拉菜单过滤多选框，它不允许所选项目保持不变。

Everything works great, except that when I select or have pre-selected values in the Multi Select Box and I filter the Multi Select Box with a Dropdown, it does not allow the selected items to persist.

EX：让我说我通过多功能盒选择会计库内的两个房间

EX: Lets say I select both rooms inside of Accounting Library via Multi Box

<optgroup label="Accounting Library">
  <option value="143" selected="selected">105A</option> ##Select
  <option value="144" selected="selected">105B</option> ##Select
</optgroup>
<optgroup label="Ahmanson Center">
  <option value="721">fad</option>
  <option value="737">zzz</option>
</optgroup>
<optgroup label="Allan Hancock Foundations">
  <option value="154">155</option>
  <option value="155">156</option>
</optgroup>

然后我使用我的Dropdown（Ahmanson Center）&得到...

I then filter with my Dropdown (Ahmanson Center) & get...

<optgroup label="Ahmanson Center">
  <option value="721">fad</option>
  <option value="737">zzz</option>
</optgroup>

这是正确的，除了我要保留或附加之前选择的值使用下拉列表进行过滤。

Which is correct, except that I'd like to keep or append values that have been selected prior to filtering with the Dropdown.

<optgroup label="Ahmanson Center">
  <option value="721">fad</option>
  <option value="737">zzz</option>
</optgroup>
<optgroup label="Accounting Library">
  <option value="143" selected="selected">105A</option> ###Keep Selected
  <option value="144" selected="selected">105B</option> ###Keep Selected
</optgroup>

有没有人知道如何使用我的javascript执行此操作？

JAVASCRIPT

$(function() {
  ###Gathers all rooms in Multi Select Box
  var originalRooms = $('#key_room_ids').html();

  ###Filters Multi Box when the Dropdown menu changes
  $("#key_building_name").on("change",function() {

    $('#key_room_ids').html(originalRooms);

    if (this.value != "all") {

      ###Name of selected building in the Dropdown
      var building = $('#key_building_name :selected').text();

      ###Removes all of the optgroup elements (and their options) that do not match the selected building.
      ###How can I also keep the optgroup element (and the options) that have been selected?
      $('#key_room_ids').find("optgroup:not([label='" + building + "'])").remove();
    }
  }); 
});

FORM

<%= simple_form_for(@key, html: { 'data-parsley-validate' => '' }) do |f| %>

  ###Dropdown Filter
  <%= f.collection_select :building_name, Building.order('name ASC'), :id, :name, {:include_blank => '- Please Select A Building To Filter The List Below -'}, { class: "form-control" } %>             

  ###Multi Select Box Grouped by Building
  <%= f.grouped_collection_select :room_ids, Building.order('name ASC'), :rooms, :name, :id, :name, {include_blank: "- Please Select The Rooms This Key Works For -"}, {multiple: true, size: 10, :class => "form-control"} %>

<% end %>

推荐答案

以下是您可以做的事情：

Here is something you could do:

$(function() {
  $("#filter").bind("keyup", function(e) {
    var filterText = $(e.target).val();

    if (filterText === "") {
      $("optgroup").show();
    }

    $("optgroup", $("select")).each(function(index, option) {
      if (!$(option).attr("label").includes(filterText)) {
        if ($("option:selected", $(option)).length === 0) {
          $(option).hide();
        }
      }
    });
  });
});

select {
  height: 150px;
  margin-top: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label>Filter text:</label>
  <input type="text" value="" id="filter" />
</div>
<select multiple>
  <optgroup label="Accounting Library">
    <option value="143">105A</option>##Select
    <option value="144">105B</option>##Select
  </optgroup>
  <optgroup label="Ahmanson Center">
    <option value="721">fad</option>
    <option value="737">zzz</option>
  </optgroup>
  <optgroup label="Allan Hancock Foundations">
    <option value="154">155</option>
    <option value="155">156</option>
  </optgroup>

</select>

这篇关于如何在使用下拉列表过滤后保留多选框中的选定值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！