マルチ選択ボックスをフィルタリングした後にオプトグループラベルを保持するにはどうすればよいですか？

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> 

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

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

あなたが正しく理解していれば、ではないoptgroup要素（およびそのオプション）をすべて削除したい場合は、が選択した建物に一致するようにしてください。文脈では

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

：その概念は、jQueryのコードの1行でかなり明確に表現することができる

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

私はちょうどあなたの問題に取り組んだとここに私のソリューションです。 しかし、ここでは2つの部門しか取らず、2つ以上の部門がある場合は、コードを変更する必要があります。

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