可擴展的多選下拉列表

Question

如何獲得可擴展的 [樹視圖] 多選下拉列表？

例如，從下面的快照中，如果我有 Animals [Cat, Cow etc] 的子列表，是否有任何插件會顯示 + 號，當單擊時，它會在同一個下拉列表中顯示子列表，如樹視圖？

有什么建議嗎？

Answer 1

只是一個 select 標簽，我知道你不能。 在您的情況下，您需要創建一個定制的 select 盒子。

• 這可以使用 html 標簽的組合來完成，就像 JavaScript 庫的treeview插件，如Z6A2D7208853DAFCCB796 但是您對@Edgar 評論說沒有多選。
• 嵌入 flash 或 java 插件也是一種解決方案。

我想我的示例解決方案沒有給你你想要的確切的東西。 我只舉一個簡單的例子，可能有助於回答你的問題。 這是為了創建一個定制的 select 盒子。

定制Select盒子

如何創建定制的 select 盒子：

1. 創建一個將作為列表容器的 div。

   <div id="treeSelect">

2. 在 div 上添加樣式，其行為類似於 select 框。

   #treeSelect{height: 100px;width: 150px;border: 1px solid #000;overflow: auto;}

3. 將主列表的內容與 div 上的子列表一起添加。 包括可用於將內容格式化為更像樹視圖列表的所有可能樣式。

    <span class="mainList">All</span> <br /> <span class="expand" onClick="expand('animals', this);">[+]</span><span class="mainList">Animals</span> <br /> <ul id="animals" class="subList"> <li><input type="checkbox" name="animals" value="Cat">Cat</li> <li><input type="checkbox" name="animals" value="Cow">Cow</li> <li><input type="checkbox" name="animals" value="Cat">Dog</li> </ul>

4. 添加將處理如何查看子列表的腳本。

   function 展開（列表，查看）{

    var listElement = document.getElementById(list); var defaultView = '[+]'; if(view.innerHTML == defaultView){ listElement.style.display = "block"; view.innerHTML = '[-]'; } else { listElement.style.display = "none"; view.innerHTML = '[+]'; }

   }

我無法放置所有代碼，因此請參閱jsfiddle以獲取完整代碼。

我知道這不是您想要的確切東西，但我想它接近您需要的東西。 您可以根據自己的品味和需求更改樣式。 我希望這對您有所幫助，並讓您知道如何解決您的問題。

Answer 2

您可以使用treeview 插件或jsTree 插件

希望這可以幫助。 干杯

Answer 3

您可以為每個默認隱藏子級的主類別使用<optgroup> ，當單擊<optgroup> label 時，它可以簡單地取消隱藏子<option> (s)。

類似於以下內容：

在您的 CSS 中：

#categories optgroup option { display: none; }

在您的 HTML 中：

<select name="categories" id="categories">
    <optgroup label="+ Animals">
        <option value="bird">Bird</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
    </optgroup>
</select>

在您的 JavaScript 中（使用 jQuery）：

$('#categories > optgroup').click(function(){
    $(this).children().toggle();
});