带有复选框的选择列表（选项）中的jQuery树。可能？

Question

我在找一个jQuery插件/脚本做出这样的事情：

example

从我目前所面对的：

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

Answer 1

是，UL，OL和子女IL是创建'树视图'的常态。

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

使用浏览器Chrome和右键点击页面上的元素，查看HTML，你会学到很多！

Answer 2

我必须以某种方式改变从选择到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; 
} 

Answer 3

你不能将SELECT元素设计为树结构，例如。 而在你的情况下，你只能选择一个项目。但是您可以根据您的SELECT元素通过UL和LI-s创建树结构，并隐藏SELECT元素以将选定项存储在树结构中。