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

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>

然后我用我的下拉菜单(阿曼森中心)进行过滤并得到...

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