Multi Level Combox Box?

Question

Wie kann ich Multi-Level-Combobox machen. Hier verwende ich folgenden HTML-Code:

<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> 

Es zeigt alle Optionen in Combobox. Das Problem besteht darin, wie kann ich die Optionsgruppe z. Optgruppe von 1.1. Und die optgroup 1.1 ist im obigen Beispiel nicht ein Einzug nach rechts unter der Option 1. Hier versuche ich, dies für die Auswahl der Kategorie zu verwenden, die sich auf einer anderen Indexebene befinden. Gibt es irgendwelche jquery plugins dafür?

Answer 1

Dropdown-Liste passt nicht wirklich zu Ihren Bedürfnissen.

Sie besser verwenden etwas wie <ul>, die leicht mit jQuery optimiert werden kann.

Raw Beispiel:

<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; } 

Und die 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.

Es muss noch etwas optimiert werden, aber das ist eine mögliche Richtung, um zu erreichen, was Sie wollen.