如何使用jQuery将<select>下拉菜单转换为无序列表？

Question

我该如何将这种格式的下拉菜单转换为其他格式：

<select id="yearfilter" name="yearfilter">
<option value="">All years</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
</select>

将其转换为无序列表，格式如下：

<ul id="yearfilter" name="yearfilter">
<li value="">All years</li>
<li value="2011">2011</li>
<li value="2010">2010</li>
<li value="2009">2009</li>
</ul>

使用jQuery吗？

- highchartsdude

Answer 1

$('#yearfilter').parent().append('<ul id="newyearfilter" name="yearfilter"></ul>');
$('#yearfilter option').each(function(){
  $('#newyearfilter').append('<li value="' + $(this).val() + '">'+$(this).text()+'</li>');
});
$('#yearfilter').remove();
$('#newyearfilter').attr('id', 'yearfilter');

这是我会做的方式。

- Senad Meškin

Answer 2

我肯定会因这个解决方案而遭到一些反感，但这个怎么样？

var rep = $("select")
          .clone()
          .wrap("<div></div>")
          .parent().html()
          .replace(/select/g,"ul")
          .replace(/option/g,"li");

$("select").replaceWith(rep);

编辑：

将近五年后，是的，我为这个答案感到后悔。

这里有几个问题。如果列表中有一个选项如下：<option value="5">带有可选刻字</option>。你会得到<li value="5">Withlialengraving</li>。以下是使用原生JavaScript（因为jQuery并不真正支持此功能）的替代方法。

var parent = document.querySelector('select'),
    docFrag = document.createDocumentFragment(),
    list = document.createElement('ul');

// build list items
while(parent.firstChild) {
  // we simultaniously remove and store the node
  var option = parent.removeChild(parent.firstChild);

  // not interested in text nodes at this point
  if(option.nodeType !== 1) continue;

  // lets build a list item
  var listItem = document.createElement('li');

  // we loop through the properties of the node and
  // apply only the ones that also exist as atributes
  for(var i in option) {
    if(option.hasAttribute(i)) listItem.setAttribute(i, option.getAttribute(i));
  }

  // loop through the select children to append to the
  // list item.  We want text nodes this time.
  while(option.firstChild) {
    listItem.appendChild(option.firstChild);
  }

  // append them to the document fragment for easier
  // appending later
  docFrag.appendChild(listItem);
}

// build wrapping ul.  Same as above
for(var i in parent) {
  if(parent.hasAttribute(i)) list.setAttribute(i, parent.getAttribute(i));
}

// add the list items to the list
list.appendChild(docFrag);

// lastly replace the select node with the list
parent.parentNode.replaceChild(list, parent);

<select id="yearfilter" name="yearfilter">
<option value="">All years</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
</select>

- Joseph Marikle

---

多么简单的完美解决方案。 - Ismail Farooq

Answer 3

您可以使用map()方法从<option>元素中构建<li>元素，然后使用replaceAll()方法替换<select>元素：

var $yearFilter = $("#yearfilter");
$yearFilter.find("option").map(function() {
    var $this = $(this);
    return $("<li>").attr("value", $this.attr("value")).text($this.text()).get();
}).appendTo($("<ul>").attr({
    id: $yearFilter.attr("id"),
    name: $yearFilter.attr("name")
})).parent().replaceAll($yearFilter);

你可以在这个fiddle里看到结果。

- Frédéric Hamidi

---

这应该是正确的答案。其他所有的假设输入都是完美无缺的。 - gman

Answer 4

在 ul 中添加 name 属性或在 li 标签中添加 value 属性是没有必要的。

试试这个：http://jsfiddle.net/vfjFK/2/

$(function(){
    var id = "yearfilter";
    $('#'+id).after("<ul id='temp' />")
        .children("option").each(function() {
            $("#temp").append("<li>"+$(this).text()+"</li>");
        })
        .end().remove();
    $('#temp').attr("id",id);
});

如果你真的需要这些无用属性，可以试试这个：http://jsfiddle.net/vfjFK/3/

$(function(){
    var id = "yearfilter";
    $('#'+id).after("<ul id='temp' />")
        .children("option").each(function() {
            $("#temp").append('<li value="'+$(this).val()+'">'+$(this).text()+"</li>");
        })
        .end().remove();
            $('#temp').attr({"id":id,"name":id});
});

- Blazemonger

Answer 5

以下是一种实现方式：

var $select = $('#yourSelectElement'),
    $ul = $('<ul></ul>').attr('id', $select.attr('id'))
                        .attr('name', $select.attr('name'));

$select.children().each(function() {
    var $option = $(this);
    $('<li></li>').val($option.val())
                  .text($option.text())
                  .appendTo($ul);
});

$select.replaceWith($ul);

- FishBasketGordo

Answer 6

您只需将标签替换为它们的对应项：

 var select = $('#yearFilter');
 var ul = $('<ul/>');
 ul.attr({ id: select.attr('id'), name: select.attr('name') });

 select.find('option').each(function()
 {
     var item = $('<li/>');
     item.text(this.Text).val(this.val());

     ul.append(item);
 });

 $('#yearFilter').replaceWith(ul);

- Tejs