Как сохранить выбранные значения в окне Multi Select после фильтрации с помощью Dropdown

Question

В настоящее время у меня есть выпадающий список зданий, который фильтрует Multi Select Box с различными номерами, сгруппированными по их соответствующему зданию.

Все работает отлично, за исключением того, что, когда я выбираю или имею предварительно выбранные значения в Multi Select Box, и я фильтрую Multi Select Box с выпадающим списком, он не позволяет выбранным элементам сохраняться.

EX: Допустим, я выбираю обе комнаты внутри Accounting библиотеки через многостороннюю 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> 

Я тогда фильтр с моим раскрывающийся (Ahmanson Center) & получить ...

<optgroup label="Ahmanson Center"> 
    <option value="721">fad</option> 
    <option value="737">zzz</option> 
</optgroup> 

Это правильно, за исключением того, что я хотел бы сохранить или добавить значения, которые были выбраны до фильтрации с помощью Dropdown.

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

ФОРМА

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

Вот что вы можете сделать:

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

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

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