CODEWITHSUNDEEP
jqueryhtml-listshtml-select
Jerpl
Jerpl

Reputation: 189

How would I convert Select Options into a list but keep values?

I have a select dropdown list which looks like this:

<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>

I want to convert this select box into an unordered list instead, but I need to somehow keep the option values and have the new links link to these values.

So far I've managed to find a small piece of jquery to convert the select dropdown into the list, but when I do so it removes the values as well, meaning all the links just link to nowhere instead. Is there a way of doing this? Keeping the values and somehow converting them to href instead?

Thanks in advance!!

Upvotes: 0

Views: 5918

Answers (1)

Jay Claiton
Jay Claiton

Reputation: 437

An easy solution would be to do it like this

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

and the 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>

Here is the FIDDLE

Upvotes: 1

Related Questions