다중 선택 상자를 필터링 한 후 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> 

UI 용도를위한 optgroup 레이블.

아무도 내 자바 스크립트로 이것을 할 수있는 방법을 알고 있습니까?

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

: 난 그냥 문제에 근무하고 여기 내 솔루션입니다

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

그 개념은 jQuery 코드 한 줄 꽤 명확하게 표현 될 수있다. 하지만 여기에서는 두 개의 부서 만 가지고 있으며 두 개 이상의 부서가있는 경우 코드를 수정해야 할 수도 있습니다.

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