創建多級下拉列表

我想創建HTML中的多級下拉列表像上述照片。

<select id ="dropdown"> 
    <option value="consolidated" id="consolidated">All Schools & Companies</option> 
    <option value="company">Companies</option> 
    <option value="school" id ="school">Schools</option> 
    </select>

這是我的基準級別1列表。如果我點擊「公司」，那麼一個新的子菜單應該打開顯示companyA公司B，如果我點擊「學校」，那麼我應該得到另一個子菜單顯示schoolA，schoolB。

來源

2013-10-30 user2291144

檢查此問題http://stackoverflow.com/questions/6857287/how-to-make-a-cascading-drop-down-list-in-php-using-jquery –

檢查此小提琴http：// jsfiddle。淨/ g5xSX /它有助於 –

檢查了這一點： http://stackoverflow.com/questions/5288792/how-to-indent-multiple-levels-of-select-optgroup-with-css –

對於全參考檢查此琴

<ul> 
      <li><a href="#">SHARED HOSTING</a><span>WHM/Cpanel</span></li> 
      <li><a href="#">EMAIL HOSTING</a><span>WEBMAIL</span></li> 
      <li><a href="#">BLOG HOSTING</a><span>WHM/Cpanel</span></li> 
      <li><a href="#">E-COMMERCE HOSTING</a><span>WHM/Cpanel</span></li> 
      <li><a href="#">FILE STORAGE HOSTING</a><span>WHM/Cpanel</span></li> 
      <li class="dropdown-submenu"><a href="#">RESELLER HOSTING</a><span>Private Nameservers</span> 
       <ul class="dropdown-menu"> 
        <li><a href="#">SHARED HOSTING</a><span>WHM/Cpanel</span></li> 
        <li><a href="#">EMAIL HOSTING</a><span>WEBMAIL</span></li> 
        <li><a href="#">BLOG HOSTING</a><span>WHM/Cpanel</span></li> 
        <li><a href="#">E-COMMERCE HOSTING</a><span>WHM/Cpanel</span></li> 
        <li><a href="#">FILE STORAGE HOSTING</a><span>WHM/Cpanel</span></li> 
        <li><a href="#">RESELLER HOSTING</a><span>Private Nameservers</span></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul>

http://jsfiddle.net/SD8JL/3/

來源

2013-10-30 06:59:48