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

Using a multi-level drop down menu in a select operation

提问by krayzk

I am attempting to create a HTML form that needs to be able to accept 160 possible values for a given field, this will need to be done over and over again so I want to make it as simple as possible to find the value that I need. Everything in my list can be grouped into sub categories, so I am imagining a multi-level drop down menu type approach like here. I have seen a plethora of how-tos and sites informing me on how to do similar things where I simply make an unordered list of unordered lists i.e.:

我正在尝试创建一个 HTML 表单，它需要能够接受给定字段的 160 个可能的值，这需要一遍又一遍地完成，所以我想让它尽可能简单地找到我需要的值. 我的列表中的所有内容都可以分组到子类别中，因此我正在想象一种多级下拉菜单类型的方法，例如 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>

and then apply some CSS and JS magic to the HTML to accomplish this.

然后将一些 CSS 和 JS 魔法应用到 HTML 中以完成此操作。

This would be fine if I was using a menu to link me to another page, but I need to take a string value from what was selected and use it in a form. The problem is that I am fairly new to HTML and do not know how to extract what is selected from the above list and place it into my form (probably the easiest solution to this problem).

如果我使用菜单将我链接到另一个页面，这会很好，但我需要从所选内容中获取字符串值并在表单中使用它。问题是我对 HTML 相当陌生，不知道如何从上面的列表中提取所选内容并将其放入我的表单中（可能是解决此问题的最简单方法）。

Another approach I have seen to this would be to indent the select list using styles and groups to create kind of a tree style view like this:

我见过的另一种方法是使用样式和组缩进选择列表以创建一种树样式视图，如下所示：

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

This would be a nice solution if I were presenting say 40 options at most but where I have 160 options this will be overwhelming and simply will not do.

如果我最多提供 40 个选项，这将是一个不错的解决方案，但如果我有 160 个选项，这将是压倒性的，根本行不通。

The last solution might be to have drop downs that take from each other to limit the options in the next drop down like here.
This is also less than ideal as it requires us to select information hat does not actually get saved, it is simply to narrow options. I will take this option if all else fails but I am hoping that someone might be able to help me out.

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

回答by MStrutt

I've use this jQuery pluginon projects in the past and it has worked a treat. There are lots of different options for the configuration, and all of the html is easily stylable with your own CSS if you don't like the default look.

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