在选择操作中使用多级下拉菜单

我试图创建一个HTML表单，需要能够接受一个给定字段的160个可能的值，这将需要一遍又一遍地做，所以我想让它尽可能简单地找到我需要的值。我的列表中的所有内容都可以分组到子类别中，所以我想象一个多级下拉菜单类型的方法，就像这里一样。我已经看到了大量的指南和网站告诉我如何做类似的事情，我只是简单地制作一个无序列表的无序列表，例如:

<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>

，然后在HTML中应用一些CSS和JS魔法来实现这一点。

如果我使用菜单链接到另一个页面，这将是很好的，但我需要从选择的字符串值，并在表单中使用它。问题是我对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个选项，这将是压倒性的，根本行不通。

最后一个解决方案可能是让下拉菜单相互抽取，以限制下一个下拉菜单的选项，就像这样。
这也不太理想，因为它要求我们选择实际上没有被保存的信息，这只是缩小选项。我将采取这个选项，如果所有其他失败，但我希望有人可能能够帮助我。