Geek Answers Handbook

Convert UL to SELECT w / OPTGROUP

I am trying to convert (with jQuery) a layered UL into a SELECT drop-down menu with a nested UL group wrapped in OPTGROUPS s. I was busy with the idea of ​​using this technique to create custom menu menus (I think dropdown menus).

I have converted list items to a drop-down list of options in the past, but never with optgroups, and I can't figure it out.

An example of my UL structure;

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

An example of what I have to do

 <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 need to go deeper than one level - and I’m sure that optgroups really don’t work so well that anyway. Any help you can make would be greatly appreciated. Thanks.

+4
source share
3 answers

Something simple solution for this

 var markUp = ["<select id='sitemap'>"], $li, $a; $("#sitemap > li").each(function(){ $li = $(this); if($li.find(">li").length){ markUp.push("<optgroup label='"+$li.find(">a").text()+"'>"); $li.find(">li").each(function(){ $a = $(this).find("a"); markUp.push("<option value='"+$a.attr("href")+"'>"+$a.text()+"</option>") }); markUp.push("</optgroup>"); } else{ $a = $li.find("a"); markUp.push("<option value='"+$a.attr("href")+"'>"+$a.text()+"</option>") } }); markUp.push("</select>"); $("#sitemap").replaceWith(markUp.join('')); $("#sitemap").change(function(){ window.location = $(this).val(); });
+4
source

You can replace:

 $("#sitemap ul").each(function(){ $(this).parent().replaceWith('<optgroup label="'+$(this).prev().text()+'">'+$(this).html().replace(/<li><a href="([^"]*)">([^<]*)<\/a><\/li>/g,'<option value="$1">$2</option>')+'</optgroup>'); }); $("#sitemap li").each(function(){ $(this).replaceWith('<option value="'+$(this).children().attr('href')+'">'+$(this).text()+'</option>'); }); $("#sitemap").removeAttr("id").wrapInner('<select id="sitemap" />').children().unwrap();

Or create and then delete the ul # sitemap:

 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();
+1
source 
  // #ShankarSangoli code changed a little var markUp = ["<select id='sitemap'>"], $li, $a; $("#sitemap > li").each(function() { $li = $(this); if ($li.find("> ul")) { markUp.push("<optgroup label='"+$li.find(">a").text()+"'>"); $li.find("li").each(function() { $a = $(this).find("a"); markUp.push("<option value='"+$a.attr("href")+"'>"+$a.text()+"</option>"); }); markUp.push("</optgroup>"); } else { $a = $li.find("a"); markUp.push("<option value='"+$a.attr("href")+"'>"+$a.text()+"</option>") } }); markUp.push("</select>"); $("#sitemap").replaceWith(markUp.join('')); $("#sitemap").change(function(){ window.location = $(this).val(); });
0
source

More articles:


All Articles