帶有複選框的選擇列表（選項）中的jQuery樹。可能？

我在找一個jQuery插件/腳本做出這樣的事情：帶有複選框的選擇列表（選項）中的jQuery樹。可能？

enter image description here

從我目前所面對的：

<select name=""> 
    <option disabled="disabled" value="1">Category A</option> 
     <option value="2">Category A1</option> 
     <option value="3">Category A2</option> 
     <option value="4">Category A3</option> 

    <option disabled="disabled" value="5">Category B</option> 
     <option value="6">Category B1</option> 
     <option value="7">Category B2</option> 
     <option value="8">Category B3</option> 
</select>

這可能嗎？或者我必須以某種方式從SELECT更改爲UL和OPTIONS到LI？

來源

2013-04-06 AndrewS

是，UL，OL和子女IL是創建'樹視圖'的常態。

的例子，你已鏈接到也UL和LI。

使用瀏覽器Chrome和右鍵點擊頁面上的元素，查看HTML，你會學到很多！

來源

2013-04-06 11:38:21 vegetable21

我必須以某種方式改變從選擇到UL和選項李？

如果你想那麼複雜十歲上下的一個select \ option結構不會足夠的東西，更別說會由於元件數量有限，你可以在一個option中嵌入生成有效的HTML。

我想你會需要尋找到ulli套。

Dynatree如何做到這一點？

如果您檢查鏈接你看到下面的示例頁面的源代碼，顯示你到底用來創建它的元素，使用ulli套以及spans作爲頂級elemtns的子ul \ li元素。

另外span套在你找到的每一個具有一類更spans。這些類使用CSS爲文件夾，擴展器以及同一精靈表中的複選框注入圖像。

使用從HTML和CSS下面的數據應該讓你開始進入正確的方向。

這裏是其中一棵樹的HTML：

<ul class="dynatree-container" style=""> 
    <li class=""><span class="dynatree-node dynatree-exp-c dynatree-ico-c"><span class="dynatree-connector"></span><span class="dynatree-checkbox"></span><span class="dynatree-icon"></span><a href="#" class="dynatree-title" title="Look, a tool tip!">item1 with key and tooltip</a> 
     </span> 
    </li> 
    <li class=""><span class="dynatree-node dynatree-selected dynatree-exp-c dynatree-ico-c"><span class="dynatree-connector"></span><span class="dynatree-checkbox"></span><span class="dynatree-icon"></span><a href="#" class="dynatree-title">item2: selected on init</a> 
     </span> 
    </li> 
    <li class=""><span class="dynatree-node dynatree-folder dynatree-has-children dynatree-exp-c dynatree-ico-cf"><span class="dynatree-expander"></span><span class="dynatree-checkbox"></span><span class="dynatree-icon"></span><a href="#" class="dynatree-title">Folder</a> 
     </span> 
    </li> 
    <li class="dynatree-lastsib"><span class="dynatree-node dynatree-expanded dynatree-has-children dynatree-lastsib dynatree-exp-el dynatree-ico-e"><span class="dynatree-expander"></span><span class="dynatree-checkbox"></span><span class="dynatree-icon"></span><a href="#" class="dynatree-title">Document with some children (expanded on init)</a> 
     </span> 
     <ul style=""> 
      <li class=""><span class="dynatree-node dynatree-has-children dynatree-active dynatree-exp-c dynatree-ico-c"><span class="dynatree-expander"></span><span class="dynatree-checkbox"></span><span class="dynatree-icon"></span><a href="#" class="dynatree-title">Sub-item 4.1 (active on init)</a> 
       </span> 
      </li> 
      <li class=""><span class="dynatree-node dynatree-has-children dynatree-selected dynatree-exp-c dynatree-ico-c"><span class="dynatree-expander"></span><span class="dynatree-checkbox"></span><span class="dynatree-icon"></span><a href="#" class="dynatree-title">Sub-item 4.2 (selected on init)</a> 
       </span> 
      </li> 
      <li class=""><span class="dynatree-node dynatree-exp-c dynatree-ico-c"><span class="dynatree-connector"></span><span class="dynatree-icon"></span><a href="#" class="dynatree-title">Sub-item 4.3 (hideCheckbox)</a> 
       </span> 
      </li> 
      <li class="dynatree-lastsib"><span class="dynatree-node dynatree-lastsib dynatree-exp-cl dynatree-ico-c"><span class="dynatree-connector"></span><span class="dynatree-checkbox"></span><span class="dynatree-icon"></span><a href="#" class="dynatree-title">Sub-item 4.4 (unselectable)</a> 
       </span> 
      </li> 
     </ul> 
    </li> 
</ul>

下面是一些the CSS用於上述HTML。

對於相應的複選框dynatree-checkbox，圖標dynatree-icon和膨脹dynatree-expander類此CSS被用來指向相同的精靈片，唯一改變是使用的片材選擇所述圖像上的位置：

span.dynatree-empty, 
span.dynatree-vline, 
span.dynatree-connector, 
span.dynatree-expander, 
span.dynatree-icon, 
span.dynatree-checkbox, 
span.dynatree-radio, 
span.dynatree-drag-helper-img, 
#dynatree-drop-marker 
{ 
    width: 16px; 
    height: 16px; 
/* display: -moz-inline-box; /* @ FF 1+2 removed for issue 221 */ 
/* -moz-box-align: start; /* issue 221 */ 
    display: inline-block; /* Required to make a span sizeable */ 
    vertical-align: top; 
    background-repeat: no-repeat; 
    background-position: left; 
    background-image: url("icons.gif"); 
    background-position: 0 0; 
}

來源

2013-04-06 11:42:01 Nope

@AndrewS：這是有用的信息嗎？ – Nope 2013-04-08 00:15:48

你不能將SELECT元素設計爲樹結構，例如。而在你的情況下，你只能選擇一個項目。但是您可以根據您的SELECT元素通過UL和LI-s創建樹結構，並隱藏SELECT元素以將選定項存儲在樹結構中。

來源

2013-04-06 11:52:43 maksimr

帶有複選框的選擇列表（選項）中的jQuery樹。可能？

回答

相關問題