jQuery를 사용하여 계층 구조 목록 선택

Question

상당히 고급 계층 구조의 드롭 다운 옵션을 만들려고합니다. 내가 선택한 이전 옵션과 관련이없는 옵션이 숨겨 지도록하려고합니다. 예를 들어 장치 그룹이 선택되면 두 번째 드롭 다운은 기본적으로 중간 드롭 다운의 "그룹 세부 사항"이되며 사용되지 않으므로 맨 아래 드롭 다운이 사라집니다. 그런 다음 기기 설정 (상단 드롭 다운)으로 다시 전환하면 중간 드롭 다운이 기본적으로 기기 세부 정보 (중간 드롭 다운)로 표시되고 하단 드롭 다운이 다시 표시되며 기기 및 알림이 아닌 옵션과 관련된 옵션 만 표시됩니다.

/* global $ */ 
 
$(document).ready(function(){ 
 
    $("#top").change(function() { 
 
     var value = $(this).val(); 
 
     $("#middle").prop("disabled", false); 
 
     $("#middle > option").hide(); 
 
     $("#middle > option[value*='" + value +"']").show(); 
 
     $("#bottom").prop("disabled", false); 
 
     $("#bottom > option").hide(); 
 
     $("#bottom > option[value*='" + value +"']").show(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <select id="top" class="top"> 
 
     <option value="Settings">Device Settings</option> 
 
     <option value="Groups">Device Groups</option> 
 
    </select> 
 

 
    <br /><br /> 
 

 
    <select id="middle" class="middle"> 
 
     <option value="Settings--Details">Device Details</option> 
 
     <option value="Settings--Notification">Notification List</option> 
 
     <option value="Settings--Digital">Digital Inputs</option> 
 
     <option value="Settings--Analog">Analog Inputs</option> 
 
     <option value="Settings--DigitalO">Digital Outputs</option> 
 
     <option value="Settings--Geofencing">Geofencing</option> 
 
     <option value="Settings--Application">Application Specific</option> 
 
     <option value="Groups--GroupDe">Group Details</option> 
 
    </select> 
 

 
    <br /><br /> 
 

 
    <select id="bottom" class="bottom"> 
 
     <option value="Settings--Details--BasicInfo">Basic Info</option> 
 
     <option value="Settings--Details--SiteDetails">Site Details</option> 
 
     <option value="Settings--Notification--Add">Add or Edit</option> 
 
     <option value="Settings--Notification--Import">Import Notification List</option> 
 
     <option value="Settings--Digital--Displayed">Show Displayed Only</option> 
 
     <option value="Settings--Digital--All">Show All</option> 
 
    </select> 
 
</div>

Answer 1

이 변경 기능이 끝나기 전에이 추가

여기 내 코드입니다,

#top의 값이 "때이 #bottom 선택 박스를 숨길

if (value == "Groups") { 
    $("#bottom").hide(); 
} else { $("#bottom").show(); } 

그룹 "을 선택하고 다른 옵션을 선택하면 다시 표시하십시오.

편집 : #middle 값을 기준으로보기 #bottom 옵션은

$("#middle").change(function() { 
    var middle = $(this).val(); 
    $("#bottom > option").hide(); 
    $("#bottom > option[value*='" + middle +"']").show(); 
});