0

次のような選択ドロップダウンリストがあります。

<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 に変換しますか?

前もって感謝します！！

4

1 に答える 1

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>

フィドルはこちら

于 2013-09-25T13:55:07.263 に答える