JQuery - изменение выпадающего меню списка

Question

Есть ли способ, чтобы преобразовать выпадающее меню, чтобы быть список с помощью JQuery ... так:

<select> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
</select> 

в

<ul> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
</ul> 

Спасибо

Answer 1

Просто перебирать <option> элементов и создать соответствующий <li> для каждого, а затем добавить их в <ul>, например: (где #menu это идентификатор вашего выпадающего списка)

var list = $('<ul>'); 
$('#menu option').each(function() { 
    $('<li>').text($(this).text()).appendTo(list); 
}); 
list.appendTo($('body')); 

Working example on JSBin

Answer 2

Magic !!!

Если вы получаете данные с помощью любых средств

заменить выпадающий список с помощью .html() или .text().

заселить ул и Ли и concatinate в переменную как

var newcontent = "<ul> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
</ul> " 

я полагаю, выберите поле находится в DIV с идентификатором «содержание»

заменить содержимое на ('#content').html(newcontent)

или текст ,

NB. Вы должны получить данные и создать ul li. то вы можете заменить

Answer 3

Названия тегов неизменяемы в элементах DOM. Если возможно, вы должны рассмотреть вопрос о включении как в исходном коде, а затем использовать toggle() для переключения

Answer 4

Первоначально завернуть выбрать в пролете, как показано ниже -

Попробуйте это -

<span id="replace"> 
    <select id="test"> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
    </select> 
    </span> 

var html = '<ul>'; 
$('#test option').each(function(){ 
html += '<li>'+$(this).text()+'</li>'; 
}); 
html += '</ul>'; 

$('#replace').html(html);