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

Question

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

一切都很好，除了当我通过下拉列表过滤多选框时，多选框正确过滤，但删除了告诉用户构建房间属于什么的 optgroup 标签。

EX：假设我通过下拉菜单选择了会计库

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

这是正确的，除了我想保留 optgroup 标签以用于 UI 目的。

有谁知道我如何使用我的 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

如果我对您的理解正确，您希望删除与所选建筑物不匹配的所有 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 2

您可以将附加信息放入选项值本身。然后用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 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>