Question

我有一个简单的<select>列表，我通过外部API收到，无法更改。

我的问题如下：我想将此<select>列表转换为一堆常规html链接。我想使用CSS以不适用于<select>的方式设置列表的样式。我用'display：none'

隐藏原始列表

此：

<select style="display:none;">
  <option value="E1">Entry 1</option>
  <option value="E2">Entry 2</option>
  <option value="E3">Entry 3</option>
</select>

应转换为：

<a href="E1" class="X1">Entry 1</a>
<a href="E2" class="X2">Entry 2</a>
<a href="E3" class="X3">Entry 3</a>

我如何实现这一目标？

我找到了一个解决方案，但这是错误的方式！ Create <select> from list - indent child items?

Answer 1

这是一个解决方案，可以在http://jsfiddle.net/C5S32/44/

进行测试

var options = '';
$('select').find('option').each(function () {
    var
    val = $(this).val(),
    text = $(this).text(),
    i = 1;
    options += '<a href="' + val + '">' + text + '</a>';
});
$('<div class="test" />').append(options).appendTo('#selectnav');

从选择列表创建自动链接

1 个答案: