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

如何以此格式转换下拉列表：

 All years 2011 2010 2009  

以这种格式进入无序列表：

 
 
All years
 
2011
 
2010
 
2009
  

使用jquery ??

Answer 1

 $('#yearfilter').parent().append('
'); $('#yearfilter option').each(function(){ $('#newyearfilter').append('
'+$(this).text()+'
'); }); $('#yearfilter').remove(); $('#newyearfilter').attr('id', 'yearfilter'); 

这就是我要做的。

Answer 2

我会对这个解决方案产生一些仇恨但是这个呢？

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

编辑：

差不多五年后; 是的，我讨厌这个答案。

这里有一些问题。 如果您在列表中有一个选项，如下所示： With optional engraving 。 您将获得

With

lial engraving 。 这是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); 

  All years 2011 2010 2009  

Answer 3

您可以使用map（）从元素构建

元素，并使用replaceAll（）替换元素：

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

你可以在这个小提琴中看到结果。

Answer 4

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

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

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

但是，如果你真的需要无用的属性，试试这个： http ： //jsfiddle.net/vfjFK/3/

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

Answer 5

这是一种方法：

 var $select = $('#yourSelectElement'), $ul = $('
').attr('id', $select.attr('id')) .attr('name', $select.attr('name')); $select.children().each(function() { var $option = $(this); $('
').val($option.val()) .text($option.text()) .appendTo($ul); }); $select.replaceWith($ul); 

Answer 6

您只需将标签替换为对应标签：

  var select = $('#yearFilter'); var ul = $('
'); ul.attr({ id: select.attr('id'), name: select.attr('name') }); select.find('option').each(function() { var item = $('
'); item.text(this.Text).val(this.val()); ul.append(item); }); $('#yearFilter').replaceWith(ul);