在選擇操作中使用多級下拉菜單

Question

我試圖創建一個HTML表單，它需要能夠接受給定字段的160個可能的值，這將需要一遍又一遍地完成，所以我希望儘可能簡單地找到我需要的價值。我的列表中的所有內容都可以分組爲子類別​​，因此我正在想象一個多級下拉菜單類型的方法like here。我見過的入門指南和網站通知我就怎麼做類似的事情，我只是讓無序列表的無序列表過多，即：

<ul class="mlddm"> 
    <li><a href="#">Entity Provider</a> 
    <ul> 
     <li><a href="#">Name</a></li> 
     <li><a href="#">DBA</a></li> 
     <li><a href="#">Entity Type</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Individual Provider</a> 
    <ul> 
     <li><a href="#">Name</a> 
     <ul> 
      <li><a href="#">Full Name</a></li> 
      <li><a href="#">Prefix</a></li> 
      <li><a href="#">First Name</a></li> 
      <li><a href="#">Middle Name</a></li> 
      <li><a href="#">Last Name</a></li> 
      <li><a href="#">Suffix</a></li> 
      <li><a href="#">Professional Suffix</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Birth Date</a> 
     <ul> 
      <li><a href="#">Full Birth Date</a></li> 
      <li><a href="#">Day Of Birth</a></li> 
      <li><a href="#">Month Of Birth</a></li> 
      <li><a href="#">Year Of Birth</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Education</a> 
     <ul> 
      <li><a href="#">Institution</a></li> 
      <li><a href="#">City</a></li> 
      <li><a href="#">State</a></li> 
      <li><a href="#">Country</a></li> 
      <li><a href="#">Start Date</a></li> 
      <li><a href="#">End Date</a></li> 
      <li><a href="#">Graduation Date</a></li> 
      <li><a href="#">Degree</a></li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
</ul> 

，然後塗抹一些CSS和JS魔法的HTML到做到這一點。

如果我使用菜單將我鏈接到另一個頁面，但這樣會很好，但我需要從所選內容中選取一個字符串值並在表單中使用它。問題是，我對HTML相當陌生，不知道如何從上面的列表中提取選定內容並將其放入我的表單（可能是此問題的最簡單解決方案）。

我已經看到了這個另一種方法是使用樣式和羣體創造一種樹風格的視圖這樣的縮進選擇列表：

<select name="select_projects" id="select_projects"> 
    <option value="">project.xml</option> 
    <optgroup label="client1"> 
     <option value="">project2.xml</option> 
    </optgroup> 
    <optgroup label="client2"> 
     <option value="">project5.xml</option> 
     <option value="">project6.xml</option> 
     <optgroup label="client2_a"> 
      <option value="" style="margin-left:23px;">project7.xml</option> 
      <option value="" style="margin-left:23px;">project8.xml</option> 
     </optgroup> 
     <option value="">project3.xml</option> 
     <option value="">project4.xml</option> 
    </optgroup> 
    <option value="">project0.xml</option> 
    <option value="">project1.xml</option> 
</select> 

這將是一個很好的解決方案，如果我是呈現說最多40個選項，但我有160個選項，這將是壓倒性的，根本不會這樣做。

最後一種解決方案可能是讓對方下拉以限制下一個下拉選項like here。
這還不夠理想，因爲它要求我們選擇信息帽實際上沒有得到保存，這只是縮小選項。如果一切都失敗了，我會採取這個選項，但我希望有人能夠幫助我。

Answer 1

我在過去的項目中使用this jQuery plugin，它已經工作過。配置有很多不同的選項，如果你不喜歡默認的外觀，所有的html都可以很容易地用你自己的CSS進行風格化。