javascript - 从选择列表创建自动链接

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