使用下拉列表过滤后如何保留多选框中的选定值

Question

我目前有一个包含建筑物的下拉菜单，用于过滤多选框，其中包含按各自建筑物分组的各种房间。

一切都很好，除了当我在多选框中选择或具有预选值并使用下拉菜单过滤多选框时，它不允许所选项目保留。

EX：假设我通过 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>

然后我使用我的下拉列表（Ahmanson 中心）过滤并获取...

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

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

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

表格

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

Answer 1

你可以这样做：

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