如何将 Select Options 转换为列表但保留值？

Question

我有一个如下所示的选择下拉列表：

<form autocomplete="off" method="post" action="/search.html" name="asearch">
<select id="ingredient" name="attributes[3]" onchange="asearch.submit()">
    <option value="16" />Biscuits
    <option value="3" />Bites
    <option value="6" />Bones
    <option value="18" />Chews
    <option value="9" />Popcorn
    <option value="56" />Shanks
    <option value="1" />Sticks
    <option value="140" />Toy</select>
<input type="hidden" name="advanced" value="1" /></form>

我想将此选择框转换为无序列表，但我需要以某种方式保留选项值并让新链接链接到这些值。

到目前为止，我已经设法找到一小块 jquery 来将选择下拉列表转换为列表，但是当我这样做时，它也会删除值，这意味着所有链接都只是链接到无处。有没有办法做到这一点？保留这些值并以某种方式将它们转换为 href？

提前致谢！！

Answer 1

一个简单的解决方案就是这样做

$('#ingredient option').each(
function() {
    $('#list').append('<li><a href="/'+$(this).val()+'">'+$(this).text()+'</a></li>');
}
);

和 HTML

<form autocomplete="off" method="post" action="/search.html" name="asearch">
<select id="ingredient" name="attributes[3]" onchange="asearch.submit()">
    <option value="16" />Biscuits
    <option value="3" />Bites
    <option value="6" />Bones
    <option value="18" />Chews
    <option value="9" />Popcorn
    <option value="56" />Shanks
    <option value="1" />Sticks
    <option value="140" />Toy</select>
<input type="hidden" name="advanced" value="1" /></form>
<ul id="list">

</ul>

这里是FIDDLE