Question

我目前有一个建筑物的下拉列表，可以过滤多个选择框，其中各个房间按其各自的建筑物分组。

一切都很好，只有当我通过下拉列表过滤多选框时，多选框会正确过滤，但会删除选项组标签，告知用户建筑物房间属于什么。

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

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

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

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

3 个答案: