複数レベルのコンボボックス？

Question

マルチレベルコンボボックスを作成するにはどうしたらいいですか？ここで私は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プラグインはありますか？

Answer 1

ドロップダウンリストはあなたのニーズにはあまり適していません。

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

Live test case。

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