Конвертировать UL в SELECT с OPTGROUP - PullRequest
Новая
       27

Конвертировать UL в SELECT с OPTGROUP

4 голосов
/ 23 июля 2011

Я пытаюсь преобразовать (с помощью jQuery) многоуровневый UL в раскрывающийся список SELECT с вложенной группой UL, заключенной в OPTGROUPS s.Я возился с идеей использования этой техники для создания адаптивных меню сайтов (например, выпадающих меню).

В прошлом я преобразовывал элементы списка в выпадающий список опций, но никогда не использовал optgroups,и я не могу понять это.

Пример моей UL структуры; 

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

Пример того, кем я хочу стать; 

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

Это не должно идти глубже, чем на один уровень - и я почти уверен, что опт-группы на самом деле не так хорошо работают так глубоко.Любая помощь, которую вы можете оказать, будет очень кстати.Спасибо.

Ответы [ 3 ]

4 голосов
/ 23 июля 2011

Что-то простое решение для этого 

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(); });
1 голос
/ 23 июля 2011

Вы можете заменить: 

$("#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();

Или создайте, а затем удалите 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();
0 голосов
/ 18 сентября 2013 
    // #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(); });
...