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

如何将选择选项转换为列表但保留值？

1 个答案: