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>

然后我用我的Dropdown（Ahmanson中心）＆amp; GET ...

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

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

Answer 1

您可以做以下事情：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: