将选择列表转换为 ul 列表答案

【问题标题】：transform a select list into a ul list将选择列表转换为 ul 列表
【发布时间】：2009-12-16 04:37:50
【问题描述】：

我正在尝试将选择列表克隆到标准 ul 列表中，以增强 javascript 选择框操作/样式。

基本上，如果我这样做： $("#calendar 选择选项").clone().appendTo("#test");

我得到以下html

<ul id="test">
<option>All Types</option>
<option>Installation</option>
<option>Music</option>
<option>Performing Arts</option>
<option>Season</option>
<option>YUIYIYI</option>
</ul>

我怎样才能在不丢失所有值的情况下将所有 <option> 标签更改为 <li> 标签？

非常感谢您的帮助。

一个。

【问题讨论】：

标签： jquery css list select clone

【解决方案1】：

我建议您通过遍历您的选项来获得正确的 li 元素标记。

一个使用$.map的例子：

var listItems = $("#calendar select option").map(function(){
  return '<li>' + $(this).text() + '</li>';
}).get().join("");

$("#test").append(listItems);

检查上面的sn-p here。

【讨论】：

反响很好。我真的需要开始更多地使用map 方法。

【解决方案2】：

我的意见是选项值应该被视为“自定义选择”的 rel 标签：

var listitems = [];
$("#calendar select option").each(function() {
    var $this = $(this);
    listitems.push('<li rel="' + $this.val() + '">' + $this.text() + '</li>');
});

$('#test').html(listitems.join(""));

【讨论】：

【解决方案3】：

这样的事情应该可以工作：

var list_items = '';
$("#calendar select option").each(function() {
    var $this = $(this);
    list_items += '<li rel="'+$this.val()+'">'+$this.html()+'</li>';
});
$("#test").append($(list_items));

顺便说一句，据我回忆，字符串连接和 one 追加通常比一堆追加或数组推送更快。

感谢 @cballou 的 rel 标签部分...

【讨论】：

【解决方案4】：

$("#calendar select option").each(
    function(){
        html = $(this).html();
        e = document.createElement('li');
        e.setAttribute('innerHTML',html);
        $("#test").append(e);
    }
);

未经测试，但这应该可以帮助您完成大部分工作。祝你好运！

【讨论】：

你使用document.createElement('li')之类的东西真是太不像话了......没什么问题......只是感觉很糟糕。
我们不要忘记 jQuery 是 javascript :) 在我看来，createElement 是完成这项特定任务的正确工具。

【解决方案5】：

而不是...

$("#calendar select option").clone().appendTo("#test");

试试……

$("#calendar select option").each(function(){
  $("<li>" + $(this).text() + "</li>").appendTo("#test");
});

又短又甜。

【讨论】：

追加一堆时间比较慢。
可能是真的，但考虑到他发布的样本量，我怀疑使用多个追加会导致明显的延迟。