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

Question

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

例

根据我目前的情况：

<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是创建“ treeview”的规范。

您已链接到UL和LI的示例。

使用Chrome之类的浏览器，然后右键单击页面上的元素以查看HTML，您将学到很多东西！

Answer 2

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

如果您希望使用select \\ option构造不那么复杂，那么由于您可以嵌入option的元素数量有限，更不用说生成有效的HTML了。

我想你会需要寻找到ul li集。

---

Dynatree如何做到的？

---

如果您查看链接的示例页面的源代码，则会看到以下内容，其中使用ul li集以及spans作为sub ul \\ li元素的顶级元素，准确显示了用于创建该页面的元素。

此外，在span集中，您会发现更多的spans ，每个spans都有一个类。 这些类使用CSS为同一Sprite-sheet中的文件夹，扩展器以及复选框注入图像。

使用来自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>

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

对于复选框dynatree-checkbox ，图标dynatree-icon和扩展器dynatree-expander类，此CSS用来指向相同的sprite-sheet，唯一改变的是在工作表上的位置选择所使用的图像：

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元素以将所选项目存储在树结构中。