Question

可能重复：
How to convert unordered list into nicely styled <select> dropdown using jquery?

我想创建一个用户脚本，将站点上的所有列表更改为下拉列表。例如：

<ul class="tabmenu">
<li class="selected"> <a href="#">tab 1</a> </li>
<li><a href="#">tab 2</a></li>
<li><a href="#">tab 3</a></li>
<li><a href="#">tab 4</a></li>
<li><a href="#">tab 5</a></li>
</ul>

会变成：

<select> 
<option value="" selected="selected">Select</option>  
<option value="#">tab 1</option> 
<option value="#">tab 2</option> 
<option value="#">tab 3</option> 
<option value="#">tab 4</option> 
<option value="#">tab 5</option> 
</select>

有关如何实现这一目标的任何想法？

Answer 1

您可以使用简单的地图转换元素：

// map from "li" elements to "option"
var options = $("ul.tabmenu li a").map(function(i,e) {
    return $("<option " + (($(e).parent().hasClass('selected')) ? "selected='selected'" : "") + " value='" + $(e).attr('href') + "'>" + $(e).text() + "</option>");
});

// create "select" element and append previous
var select = $("<select></select>");
options.each(function(i,e) { select.append(e); });

console.log(select);

用户脚本将<ul>更改为<select> </select> </ul>

1 个答案: