확장 가능 다중 선택 드롭 다운 목록

Question

확장 가능한 [트리보기] 다중 선택 드롭 다운 목록은 어떻게 얻을 수 있습니까?

예를 들어 아래의 스냅 샷에서 Animals [Cat, Cow etc.]의 하위 목록에 + 기호가 표시되고 클릭 될 때와 같은 플러그인이 있으면 하위 목록이 다음과 같이 표시됩니다. 같은 드롭 다운 트리보기처럼?

어떤 조언을 ?

Answer 1

혼자만의 선택 태그, 나 네가 할 수 없다는 걸 알아라. 귀하의 경우, 사용자 정의 된 선택 상자를 작성해야합니다.

• 이
  은 JQuery UI 같은 자바 스크립트 라이브러리의 treeview 플러그인처럼, html 태그의 조합을 사용하여 수행 할 수 있습니다. 그러나 당신은 @Edgar에 대해 다중 선택이 없다고 코멘트했습니다.
• 또한 플래시 또는 자바 플러그인을 포함하는 것이 해결책이 될 수 있습니다.

내 예제 솔루션을 사용하면 원하는 정확한 것을 제공하지 못했을 것입니다. 질문에 대답하는 데 도움이 될 수있는 간단한 예를 드리겠습니다. 이것은 사용자 정의 된 선택 상자를 작성하는 것입니다.

사용자 정의 선택 박스

사용자 정의 된 선택 상자 만드는 방법 :

1. 목록의 컨테이너가 될 것이다 사업부를 작성합니다.

   <div id="treeSelect">

2. 은 선택 상자처럼 행동 할 DIV에 스타일을 추가합니다.

   #treeSelect{height: 100px;width: 150px;border: 1px solid #000;overflow: auto;}

3. 은 DIV의 하위 목록과 함께 주요 목록의 내용을 추가합니다. 트리 뷰 목록과 유사하도록 컨텐트를 형식화하는 데 사용할 수있는 가능한 모든 스타일을 포함하십시오.

   <span class="mainList">All</span> 
   <br /> 
   <span class="expand" onClick="expand('animals', this);">[+]</span><span class="mainList">Animals</span> 
   <br /> 
   <ul id="animals" class="subList"> 
       <li><input type="checkbox" name="animals" value="Cat">Cat</li> 
       <li><input type="checkbox" name="animals" value="Cow">Cow</li> 
       <li><input type="checkbox" name="animals" value="Cat">Dog</li> 
   </ul> 
   

4. 하위 목록을 보는 방법을 처리하는 스크립트를 추가하십시오.

   기능 확장 (목록보기) {

   var listElement = document.getElementById(list); 
   var defaultView = '[+]'; 
   
   if(view.innerHTML == defaultView){ 
       listElement.style.display = "block"; 
       view.innerHTML = '[-]'; 
   } else { 
       listElement.style.display = "none"; 
       view.innerHTML = '[+]'; 
   } 
   

   }

나는 모든 코드 그래서 전체 코드의 jsfiddle를 참조하십시오 넣을 수 없습니다.

나는 이것이 당신이 원했던 정확한 것이 아니라는 것을 알고 있지만, 그것이 당신이 필요로하는 것에 가깝다고 생각합니다. 당신의 취향과 필요에 따라 스타일을 바꿀 수 있습니다. 나는 이것이 도움이 될 수 있고 당신의 질문을 해결하는 방법을 알기를 바랍니다.

Answer 2

당신은 treeview plugin 또는이 도움이 jsTree plugin

희망을 사용할 수 있습니다. 건배

Answer 3

당신은 그 아이들이 기본적으로 숨겨져 각 메인 카테고리에 대한 <optgroup>을 사용할 수 있으며, <optgroup> 레이블을 클릭하면 단순히 아이 <option> (들)을 숨기기를 취소 할 수 있습니다. 다음과 같은

뭔가 : 당신의 CSS에서

:

#categories optgroup option { display: none; } 

당신의 HTML에서 :

<select name="categories" id="categories"> 
    <optgroup label="+ Animals"> 
     <option value="bird">Bird</option> 
     <option value="dog">Dog</option> 
     <option value="cat">Cat</option> 
    </optgroup> 
</select> 

을 (jQuery를 사용하여) 자바 스크립트에서 :

$('#categories > optgroup').click(function(){ 
    $(this).children().toggle(); 
});