Как преобразовать неупорядоченный список в красиво оформленный выпадающий список <select> с помощью jquery?

Ответ 1

$('ul.selectdropdown').each(function() {
    var select = $(document.createElement('select')).insertBefore($(this).hide());
    $('>li a', this).each(function() {
        var a = $(this).click(function() {
            if ($(this).attr('target')==='_blank') {
                window.open(this.href);
            }
            else {
                window.location.href = this.href;
            }
        }),
        option = $(document.createElement('option')).appendTo(select).val(this.href).html($(this).html()).click(function() {
            a.click();
        });
    });
});

В ответ на ваш последний комментарий я немного изменил его, но не протестировал его. Дайте мне знать.

$('ul.selectdropdown').each(function() {
    var list = $(this), select = $(document.createElement('select')).insertBefore($(this).hide());

    $('>li a', this).each(function() {
        var target = $(this).attr('target'),
        option = $(document.createElement('option'))
            .appendTo(select)
            .val(this.href)
            .html($(this).html())
            .click(function(){
                if(target==='_blank') {
                    window.open($(this).val());
                }
                else {
                    window.location.href = $(this).val();
                }
            });
    });
    list.remove();
});

Ответ 2

$(function() {
    $('ul.selectdropdown').each(function() {
        var $select = $('<select />');

        $(this).find('a').each(function() {
            var $option = $('<option />');
            $option.attr('value', $(this).attr('href')).html($(this).html());
            $select.append($option);
        });

        $(this).replaceWith($select);
    });
});

ИЗМЕНИТЬ

Как и любой код jQuery, который вы хотите запустить при загрузке страницы, вы должны обернуть его внутри блока $(document).ready(function() { ... }); или внутри него более короткой версии $(function() { ... });. Я обновил функцию, чтобы показать это.

ИЗМЕНИТЬ

В моем коде также была ошибка, я попытался взять href из элемента li.

Ответ 3

Это решение работает также в IE и работает с выбранным элементом (в теге привязки).

$('ul.selectdropdown').each(function(){
var list=$(this),
    select=$(document.createElement('select')).insertBefore($(this).hide()).change(function(){
  window.location.href=$(this).val();
});
$('>li a', this).each(function(){
  var option=$(document.createElement('option'))
   .appendTo(select)
   .val(this.href)
   .html($(this).html());
  if($(this).attr('class') === 'selected'){
    option.attr('selected','selected');
  }
});
list.remove();
});

Ответ 4

Спасибо всем за размещение кодов. Мой сценарий похож, но моя ситуация для Responsiveness, что для x-size он переключится на раскрывающийся список, тогда, если не размер x, используя csswatch проверить свойства "display" элемента с определенным значением ширины, установленным для него (например, 740px). Думаю, я разделяю это решение для всех, кто заинтересован. Это то, что я сочетал с кодами Тату. Вместо того, чтобы заменять html, я создал, затем спрятал новый html, а затем добавлял их при необходимости:

var $list = $('ul.list');
(listFunc = function(display){

    //Less than x-size turns it into a dropdown list
    if(display == 'block'){
        $list.hide();
        if($('.sels').length){
            $('.sels').show();
        } else {
            var $select = $('<select class="sels" />');

            $list.find('a').each(function() {
                var $option = $('<option />');
                $option.attr('value', $(this).attr('href')).html($(this).html());
                $select.append($option);
            });

            $select.insertAfter($list);

            $('.sels').on('change', function(){
                window.location = this.value;
            });
        }
    } else {
        $('.sels').hide();
        $list.show();
    }
})(element.css('display'));
element.csswatch({
    props: 'display'
}).on('css-change', function (event, change) {
    return listFunc(change.display);
});

Ответ 5

Недавно я создал решение, в котором преобразованная ul преобразуется, практически полностью подбирает выбор.

Он имеет в своем распоряжении поиск опций выбора и поддерживает активное состояние. Просто добавьте класс с активным именем и этот параметр будет выбран.

Он обрабатывает навигацию по клавиатуре.

Взгляните на код здесь: Код GitHub

И живой пример здесь: Пример кода

Неупорядоченный список должен быть в форме:

<ul id="...">
  <li><a href="...">...</a></li>
  <li><a href="...">...</a></li>
  <li><a class="active" href="...">...</a></li>
  ...
</ul>

Чтобы преобразовать ul, чтобы выбрать только вызов:

$(window).on("load resize", function() {
  ulToSelect($("ul#id"), 767);
});

Где #id - идентификатор неупорядоченного списка, а 767 - минимальная ширина окна для конвертации. Это очень полезно, если вы хотите, чтобы конвертация выполнялась только для мобильных устройств или планшетов.