多层次的combox盒子？

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> 

它显示组合框中的所有选项。问题是我该如何使选项组可选，例如optgroup为1.1。在上面的例子中，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。

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