多層次的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。

它仍然需要一些調整，但這是實現你想要的一個可能的方向。