1

如何制作多级组合框。在这里，我使用了以下 html 代码：

<select name="comboName" class="droplist droplist-by-select">
            <optgroup label="1">
                <optgroup label="1.1">
                    <option value="1.1.1"> 1.1.1 </option>
                    <option value="1.1.2"> 1.1.2 </option>
                    <option value="1.1.3"> 1.1.3 </option>
                </optgroup>
                <option value="1.2">1.2</option>
            </optgroup>
            <optgroup label="2">
                <option value="2.1">2.1</option>
                <option value="2.2" selected="selected">2.2</option>
            </optgroup>
        </select>

它在组合框中显示所有选项。问题是如何使选项组可选，例如 1.1 的 optgroup。并且 optgroup 1.1 在上面示例中的 1 选项下不缩进。在这里，我试图用它来选择处于不同索引级别的类别。有没有为此的任何 jquery 插件。

4

1 回答 1

2

下拉列表并不真正适合您的需求。

你最好使用<ul>可以用 jQuery 轻松调整的东西。

原始示例：

<ul name="comboName" class="droplist droplist-by-select">
    <li><span>1</span>
        <ul>
            <li><span>1.1</span>
                <ul>
                    <li><span>1.1.1</span></li>
                    <li><span>1.1.2</span></li>
                    <li><span>1.1.3</span></li>
                </ul>
            </li>
            <li>
                <span>1.2</span>
                <ul>
                    <li><span>1.2.1</span></li>
                    <li><span>1.2.2</span></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS：

li { margin-left: 10px; cursor: pointer; }
.selected { background-color: highlight; }

和 jQuery：

$(document).ready(function() {
    $(".droplist li span").hover(function() {
        $(this).css("background-color", "highlight");
    }, function() {
        if (!$(this).parent().hasClass("selected")) {
             $(this).css("background-color", "white");
        }
    }).on("click", function() {
        $(this).parents("ul").find("li").removeClass("selected").find("span").css("background-color", "white");
        $(this).parent().addClass("selected");
        $(this).css("background-color", "highlight");
    });​
});

现场测试用例。

它仍然需要一些调整，但这是实现您想要的一个可能的方向。

于 2012-04-08T07:54:57.887 回答