jquery convert nested list of radio buttons to dropdown with optgroup headings -

i've seen more few few posts on looking take list of links , turning them drop-down. i've taken examples , have not had luck applying them markup bit different. need turn nested list of radio buttons labels , convert them drop down list <optgroup> headings, removing nested radio inputs , labels.

basically list of radio buttons im working wildly out of control , clean drop down list better usability , screen real estate. once handle conversion, plan hide original radio button set, , map user drop-down selection corresponding radio buttons process on submission of form. first need generate drop-down list . . .

here simplified sample of starting markup:

<ul>     <li>         <label><input type="radio">usa</label>         <ul class="children">             <li>                 <label><input type="radio" >northeast</label>                 <ul class="children">                     <li>                         <label><input itype="radio">mid-atlantic</label>                     </li>                     <li>                         <label><input type="radio">new england</label>                     </li>                 </ul>             </li>             <li>                 <label><input type="radio">south</label>             </li>             <li>                 <label><input type="radio">west</label>             </li>         </ul>     </li>     <li>         <label><input type="radio" checked="checked">no venue region</label>     </li> </ul> 

im trying convert above following:

<select>     <optgroup label="usa">         <optgroup>northeast</option>             <option>mid-atlantic</option>             <option>new england</option>         <optgroup>         <option>south</option>         <option>west</option>     </optgroup>     <option>no region</option> </select> 

you might notice top level <ul> in first example, has radio button associated –– not desired want user precise possible in selection. these should have been headings, unfortunately have no control of what's generated.

they type of solution favour use function process existing markup new entity can append parent dom element after hiding original.

in so thread @enki offers solution approach, i've not been able apply it, cant quite understand how iterating though elements. solution goes this:

function sitemapcycle(){         if(typeof(sitemapnode)==="undefined") sitemapnode= $("#sitemap");         if($(this).find("ul").length)         {             sitemapnode= $(sitemapnode).append('<optgroup label="'+$(this).children().first().text()+'" />').children().last();             $(this).find("ul li").each(sitemapcycle);             sitemapnode= $(sitemapnode).parent();         }         else         {              $(sitemapnode).append('<option value="'+$(this).children().attr("href")+'">'+$(this).text()+'</option>');         }     }     var sitemapnode;     $("#sitemap").removeattr("id").after('<select id="sitemap" />').children().each(sitemapcycle).parent().remove(); 

the closest i've been able get, doesn't use @enki's approach, , doesn't create optgroup top levels , is incomplete this:

$(function() {     $('#venue-regionchecklist').each(function() {             $(this).find('label').each(function() {                 var cnt = $(this).contents();                 $(this).replacewith(cnt);             });         var $select = $('<select />');         $(this).find('li').each(function() {             var $option = $('<option />');              $(this).html($(this).html());             $option.attr('id', $(this).attr('id')).html($(this).html());             $select.append($option);         });         $(this).replacewith($select);     }); }); 

here unsimplified sample of radio list if wants take a whack @ it. love know how approach kind of problem.

cheers mate!

i believe recursivity can of here:

function builddropdownfromul(currentul, level) {    var dropdownhtml = "";    currentul.children("li").each(function () { // cycle through li elements       if ($(this).children("ul").length == 0) {          // there no ul element in li means li selectable option          dropdownhtml = dropdownhtml + "<option value='" + $(this).children("label").children("input").attr("value") + "'>" + nbsps(level) + $(this).children("label").text() + "</option>";       } else {          // there ul in li means label in current li optgroup           // , ul should again processed          dropdownhtml = dropdownhtml + "<optgroup label='" + nbsps(level) + $(this).children("label").text() + "'>" + "</optgroup>" + builddropdownfromul($(this).children("ul"), level + 1);       }    });    return dropdownhtml + "<optgroup label='&nbsp;'></optgroup>"; } 

there watch for: function assumes if given li element contains label element (and no ul element) label selectable option , if li contains label , ul label option group.

and here the fiddle

i hope helps!