Estoy tratando de convertir (con jQuery) un multinivelUL en unSELECT desplegable con el @ anidaUL grupo envuelto enOPTGROUPSs. Estoy jugando con la idea de usar esta técnica para crear menús del sitio receptivos (piense en menús desplegables).

He convertido elementos de la lista en un menú desplegable de opciones en el pasado, pero nunca con optgroups, y no puedo resolverlo.

Un ejemplo de miUL estructura

<ul id="sitemap">
    <li><a href="www.google.com">Home</a></li>
    <li><a href="www.google.com">Small Business</a>
        <ul>
            <li><a href="www.google.com">Laptops</a></li>
            <li><a href="www.google.com">Workstations</a></li>
            <li><a href="www.google.com">Workstations</a></li>
            <li><a href="www.google.com">Printers</a></li>
            <li><a href="www.google.com">Mobile Phones</a></li>
        </ul>
    </li>
    <li><a href="www.google.com">Public Sector</a>
        <ul>
            <li><a href="www.google.com">State Government</a></li>
            <li><a href="www.google.com">Federal Government</a></li>
            <li><a href="www.google.com">Support and Drivers</a></li>
        </ul>
    </li>
    <li><a href="www.google.com">Large Enterprise</a>
        <ul>
            <li><a href="www.google.com">Services</a></li>
            <li><a href="www.google.com">Solutions</a></li>
        </ul>
    </li>
</ul>

Ejemplo de en qué me convierto;

<select id="sitemap">
    <option href="www.google.com">Home</option>
    <optgroup label="Small Business">
        <option href="www.google.com">Laptops</option>
        <option href="www.google.com">Workstations</option>
        <option href="www.google.com">Printers</option>
        <option href="www.google.com">Mobile Phones</option>
    </optgroup>
    <optgroup label="Public Sector">
        <option href="www.google.com">State Government</option>
        <option href="www.google.com">Federal Government</option>
        <option href="www.google.com">Support and Drivers</option>
    </optgroup>
    <optgroup label="Large Enterprise">
        <option href="www.google.com">Services</option>
        <option href="www.google.com">Solutions</option>
    </optgroup>
</select>

No necesita ir más allá de un nivel, y estoy bastante seguro de que los grupos ópticos no funcionan realmente tan bien de todos modos. Cualquier ayuda que pueda contribuir sería muy bienvenida. Gracias