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

时间:2010-11-02 16:57:13

标签: javascript jquery

有没有办法使用jquery将下拉菜单转换为列表...所以:

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

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

由于

4 个答案:

答案 0 :(得分:8)

只需遍历<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

答案 1 :(得分:2)

最初在span中包裹select,如下所示 -

试试这个 -

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

答案 2 :(得分:0)

魔术!!!

如果您以任何方式获取数据

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

填充ul和li并将其连接成一个变量,如

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

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

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

或文字。

NB。您应该获取数据并创建ul li。然后你可以替换

答案 3 :(得分:0)

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