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是你的下拉的ID）

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

Working example on JSBin

Answer 2

魔術!!!

如果你以任何方式獲取數據

替代由html的下拉列表（）或的.text（）。

填充UL和李和concatinate到一個變量像

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

我認爲選擇框是一個div id爲「內容」

更換內容由('#content').html(newcontent)

或文本。

注意：您應該獲取數據並創建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);