jquery-将下拉菜单更改为列表

只需在 <option> 元素并创建相应的 <li> 对于每个,然后将它们添加到 <ul> ,像这样:(在 #menu

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

Working example on JSBin

最初在跨度中包装选择,如下所示-

试试这个-

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

如果你用任何方法得到数据

用.html()或.text()替换下拉列表。

将ul和li填充并concatinate为一个类似于

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

我假设select框位于id为“content”的div中

内容替换为 ('#content').html(newcontent )

或文字。

标记名在DOM元素中是不可变的。如果可能的话,您应该考虑在源代码中同时包含这两者,然后使用 toggle() 切换