选择列表（选项）中的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

  

我必须以某种方式从SELECT更改为UL，将OPTIONS更改为LI？

如果你想要一些复杂的东西，select \ option结构是不够的，更不用说生成有效的HTML了，因为你可以嵌入{{{{{{{ 1}}。

我认为您需要查看option ul套。

---

Dynatree是如何完成的？

---

如果您查看关联的示例页面的来源，请参阅下面的内容，使用li ul集以及li作为您的确切创建元素子spans \ ul元素的顶级元素。

此外，在li套内，你会发现每个人都有一个班级span。这些类使用CSS为文件夹，扩展器以及同一精灵表中的复选框注入图像。

使用HTML和CSS中的以下数据可以帮助您开始正确的方向。

以下是其中一棵树的HTML：

spans

以下是用于上述HTML的一些the CSS。

对于复选框<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> ，图标dynatree-checkbox和扩展器dynatree-icon类，此CSS用于指向相同的精灵表，唯一改变的是工作表上的位置选择使用的图像：

dynatree-expander

Answer 3

您无法将SELECT元素样式化为树结构，如何在示例中。 在您的情况下，您只能选择一个项目。但您可以根据SELECT元素通过UL和LI-s创建树结构，并隐藏SELECT元素以在树结构中存储所选项目。