创建多级下拉列表

我想创建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