如何在过滤多 select 框后保留 optgroup 标签？

Question

我目前有一个包含建筑物的下拉列表，该下拉列表过滤了一个多 Select 框，其中包含按各自建筑物分组的各种房间。

一切正常，除了当我通过下拉菜单过滤 Multi Select Box 时，Multi Select Box 过滤正确，但删除了通知用户构建房间的 optgroup 标签属于。

EX: 假设我 select 会计图书馆通过我的下拉列表

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

然后我得到...

<option value="143">105A</option>
<option value="144">105B</option>

这是正确的，只是出于 UI 目的我想保留 optgroup 标签。

有谁知道我如何用我的 javascript 做到这一点？

JAVASCRIPT

$(function() {
    var rooms = $('#key_room_ids').html();

  $("#key_building_name").on("change",function() {      
        var building, options;
      building = $('#key_building_name :selected').text();

    options = $(rooms).filter("optgroup[label='" + building + "']").html();

      if (options) {

        ###This doesn't return the values with the optgroup label
        return $('#key_room_ids').html(options);

      } else {
        return $('#key_room_ids').empty();
      }
  }); 
});

表格

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

您可以将附加信息放在选项值本身中。然后用JS把值剥离出来显示结果

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

我使用管道符号作为分隔符和全名，但您可以使用任何您想要的。

Answer 2

如果我对您的理解正确，您想要删除所有不匹配所选建筑物的 optgroup 元素（及其选项）。这个概念可以用一行 jQuery 代码非常清楚地表达出来：

$('#key_room_ids').find("optgroup:not([label='" + building + "'])").remove();

在上下文中：

$(function() {
  var originalRooms = $('#key_room_ids').html();
  
  $("#key_building_name").on("change",function() {
    $('#key_room_ids').html(originalRooms);

    if (this.value != "all") {
      var building = $('#key_building_name :selected').text();
      $('#key_room_ids').find("optgroup:not([label='" + building + "'])").remove();
    }
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="key_room_ids">
<optgroup label="Accounting Library">
  <option value="143">105A</option>
  <option value="144">105B</option>
</optgroup>
<optgroup label="Ahmanson Center">
  <option value="721">fad</option>
  <option value="737">zzz</option>
</optgroup>
</select>

<select id="key_building_name">
  <option value="all">Show all</option>
  <option>Accounting Library</option>
  <option>Ahmanson Center</option>
</select>

Answer 3

我刚刚解决了您的问题，这是我的解决方案。但是这里我只拿了两个部门，如果你有两个以上的部门，那么你可能要修改代码。

<script>
$(document).ready(function(){
$("#key_building_name").on("change",function() {
var building = $("#key_building_name :selected").text();
    if (building == "Accounting Library") {
        return $('#key_room_ids').html(accounts); }
    else if (department == "Ahmanson Center") {
        return $('#key_room_ids').html(ahmanson); }
    else
        return $('#key_room_ids').html();
    });
});
</script>

<select id="key_room_ids">
<optgroup label="Accounting Library" id="accounts">
<option value="r101">101</option>
<option value="r102">102</option>
</optgroup>
<optgroup label="Ahmanson Center" id="ahmanson">
<option value="r201">201</option>
<option value="r202">202</option>
</optgroup>
</select>
<select id="key_building_name">
<option value="all">All </option>
<option value="accounts">Accounting Library</option>
<option value="hr">Ahmanson Center</option>
</select>

如何在过滤多 select 框后保留 optgroup 标签？

How do I retain the optgroup labels after filtering a multi select box?

javascript

ruby

jquery

ruby-on-rails

simple-form