Make <ul> work like <select>

[Martin C++]

Hello,

Not really sure if this is the right place to post this to but I am pretty sure I need js to accomplish this. I need to make a dropdown selection menu for my wordpress theme options, but I can't use the conventional <select> tag because I want my options to be a list of small images and this tag does not support it. (There were suggestions to use background-image but it didnt work in chrome). The problem is not making the list, I can do that, but I need it to work like a <select> tag. Meaning that the container element must have a 'name' value, cause wordpress needs this to save the settings in database. I hope I made myself clear enough.

An example what it could look like:

<ul id="infobox-img-dropdown-list" name="featured-infobox-1-img">
    <li value="phpWillFill"><img src="phpWillFillThis" /></li>
    <li value="phpWIllFill" class="selected"><img src="phpWillFillThis" /></li>
    <li value="phpWillFill" ><img src="phpWillFillThis" /></li>
</ul>

It's basically <select> but it shows images. I need it to function like <select> too.

For those who are familiar with wordpress, I am creating options page for my theme and am currently building the callback function for add_submenu_page() to display the settings form.

[paulkd]

What you describe sounds like a nav menu. Perhaps you could search in this area?

[Martin C++]

Well it is, but I need it to remember the choice and send it with other data when I submit the form.

maybe:

http://designwithpc.com/Plugins/ddSlick
http://www.marghoobsuleman.com/jquery-image-dropdown
i searched 'jquery combobox with images'

I also know a lot of WP devs use Options Tree plugin for theme customization, might be worth having a look at that and if it is not there (probably won't be) you could mod the code

[almostbob]

<ul id="infobox-img-dropdown-list" name="featured-infobox-1-img">
    <li value="phpWillFill">
        <input type='radio' value='1' name='option' id='option1' />
            <label for="option1"><img src="phpWillFillThis" /></label>
     </li>
    <li value="phpWIllFill" class="selected">
        <inpu type='radio' value='2' name='option' id='option2' selected='selected'>
            <label for="option2"><img src="phpWillFillThis" /></label>
    </li>
    <li value="phpWillFill" >
        <input type='radio' value='3' name='option' id='option3'>
            <label for="option3"><img src="phpWillFillThis" /></label>
    </li>
</ul>

If you dont want the actual radio button do display just give it a css class that display: none,
and the image remains clickable
not very clean, but funcional