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

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>

然后对 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 个选项，这将是压倒性的，根本不会这样做。

最后的解决方案可能是让下拉菜单相互取用，以限制下一个下拉菜单中的选项like here。
这也不太理想，因为它要求我们选择实际上并没有保存的信息，它只是缩小选项。如果一切都失败了，我会选择这个选项，但我希望有人能够帮助我。

Answer 1

我过去曾在项目中使用过this jQuery plugin，而且效果很好。配置有很多不同的选项，如果您不喜欢默认外观，所有 html 都可以使用您自己的 CSS 轻松设置样式。