过滤多选择框后，如何保留optgroup标签?

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

本文关键字：保留 optgroup 标签 何保留 选择 过滤      更新时间：2023-09-26

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

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

EX:假设我通过下拉菜单选择Accounting Library 

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

如果我理解正确，您想要删除所有与不匹配的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>

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

我已经使用了管道符号作为分隔符和全名，但你可以使用任何你想要的

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

<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>
相关文章：