How to move option list items to
using jquery?

Question

I humbly ask anyone because I'm having trouble moving this (option list items):

<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>

to this list:

<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>

I'm running in circles up until now. Thank you in advance..

what do you mean by 'moving'? do you want a select block appended to the ul or do you want the text from each option created as a new li — olly_uk, Mar 06 '13 at 12:14
Edit the question and add your code you have tried to achieve that. — Rais Alam, Mar 06 '13 at 12:14

score 1 · Answer 1 · edited May 23 '17 at 12:05

1

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

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

});

if this is not what you want the see below link

How to convert <select> dropdown into an unordered list using jquery?

edited May 23 '17 at 12:05

Community

1
1

answered Mar 06 '13 at 12:16

Dipesh Parmar

26,601
7
57
86

score 1 · Answer 2 · answered Mar 06 '13 at 12:17

1

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);

Working Example: http://jsfiddle.net/z3uU3/1/

answered Mar 06 '13 at 12:17

Kevin Bowersox

90,944
18
150
184

Adil · Answer 3 · 2013-03-06T12:23:30.583

0

Try this,

Live Demo

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

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

edited Mar 06 '13 at 12:23

answered Mar 06 '13 at 12:13

Adil

143,427
25
201
198

score 0 · Accepted Answer · answered Mar 06 '13 at 12:23

0

Try: Fiddle

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"));
});

answered Mar 06 '13 at 12:23

Anujith

9,319
6
32
47

How to move option list items to using jquery?

4 Answers4

How to move option list items to
using jquery?