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

Question

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

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

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

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.

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.

Solution

I've use this jQuery plugin on 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.