降下來分組 - 避免選擇父

Question

我想創建一個下拉，這將是這樣的：

Area1 
-City1 
-City2 
-City3 
Area2 
-City4 
-City5 

因此，它將具有地區某種分組，以及這些領域贏得了」不可點擊。基本上，我正在努力實現什麼Groupon。

我已經看過他們的頁面的代碼，但我沒有看到如何實現它。我需要JS/jQuery嗎？

感謝

Answer 1

使用<optgroup>標籤。例如：

<optgroup label='Seattle'> 
    <option value='seattle:tacoma'>Tacoma</option> 
    <option value='seattle:seattle'>Seattle</option> 
</optgroup> 

在web形式中，HTML <optgroup>元素創建的<select>元件中選項的分組。 optgroup標籤的label屬性顯示爲select的項目下拉列表，但無法選擇。最好的部分是不需要JavaScript。

這裏是一個生活jsFiddle example。

Answer 2

試試這個

<select> 
    <optgroup label="Candy"> 
    <option value="snickers">Snickers</option> 
    <option value="HerseyBar">Hershey Bar</option> 
    </optgroup> 
    <optgroup label="Fruit"> 
    <option value="apple">Apple</option> 
    <option value="orange">Orange</option> 
    </optgroup> 
</select>​