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

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');

我就是这样做的。

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">With optional engraving</option>。您将获得<li value="5">With lial engraving</li>。这是vanilla 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>

Answer 3

您可以使用map()来构建<li>元素中的<option>元素，使用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);

您可以在this fiddle中看到结果。

Answer 4

没有理由将name属性添加到ul，也不会将value属性添加到li标记。

试试这个：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});
});

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

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

如何使用jquery？</select>将<select>下拉列表转换为无序列表

6 个答案:

编辑：