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");
    });​
});

ライブ テスト ケース。

まだ微調整が必​​要ですが、それはあなたが望むものを達成するための1つの可能な方向です.

于 2012-04-08T07:54:57.887 に答える