jquery - 如何将选项列表项移动到使用jQuery？

Question

我谦虚地问任何人，因为我无法移动这个（选项列表项）：

<select class="list-of-users">
<option class="list-of-users">Sample Group</option>
<option class="list-of-users">TOP Group</option>
<option class="list-of-users">TEST Group</option>
<option class="list-of-users">AWD Group</option>
</select>

到这个列表：

<ul class="list-of-members">
<li class="list-of-members"></li>
<li class="list-of-members"></li>
<li class="list-of-members"></li>
<li class="list-of-members"></li>
</ul>

到目前为止，我一直在兜圈子。先感谢您..

Answer 1

$('.list-of-users').on('change',function(){
  var value = $(this);

  $('ul.list-of-members').append('<li class="list-of-members">'+value.val()+'</li>')

});

如果这不是您想要的，请参阅下面的链接

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

Answer 2

var ul = $("<ul/>").addClass("list-of-members");
$("option.list-of-users").each(function(){
   ul.append($("<li/>").html($(this).html()).addClass("list-of-members"));
});
$(".list-of-users").replaceWith(ul);

工作示例：http: //jsfiddle.net/z3uU3/1/

Answer 3

试试这个，

现场演示

strToAppend = "";
$('option.list-of-users').each(function () {
    strToAppend += "<li>" + $(this).text() + "</li>";
});

$('ul.list-of-members').append(strToAppend);

Answer 4

尝试： 小提琴

var ul = $("<ul/>").addClass("list-of-members");
$('body').append(ul);
$('.list-of-users option').each(function () {
    $('ul').append($("<li/>").text($(this).text()).addClass("list-of-members"));
});