Question

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

基本上，如果我这样做： $（“＃calendar select option”）。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>代码，而不会丢失所有值？

任何有用的帮助。

一个。

Answer 1

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

使用$.map的示例：

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

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

检查上面的代码段here。

Answer 2

这样的事情应该有效：

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

正如旁注，从我记得，字符串连接和一个追加通常比一堆追加或数组推送更快。

来自@cballou的信用转换为rel标签部分......

Answer 3

我的意见是，应将选项值视为“自定义选择”的rel标记：

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

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

Answer 4

而不是......

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

尝试...

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

简短又甜蜜。

Answer 5

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

没有经过测试，但是那应该可以帮到你。祝你好运！

将选择列表转换为ul列表

5 个答案: