jQuery Select Menu Replacement
-
10-07-2019 - |
Question
I have a select drop-down that selects a theme for the current page the user is on:
<select id="style" name="acct-stylenum">
<option value="1" selected="true">Light</option>
<option value="2">Dark</option>
</select>
Now what I would like to do is add two divs that will also control this select menu. I would much rather have the user select between two images than a select menu. The divs are as follows:
<div class="style-box light"></div>
<div class="style-box dark"></div>
I would like to use jQuery to make the select menu hidden but still use its input. Also I would like the divs to control the menus value and show a selected state. Please let me know the easiest way this can be done using jQuery or JavaScript.
Thanks in advance.
-B
Solution
if you have all the images in the same order as the options in the select you could so something like this (assuming jQuery version >= 1.3 and < 1.4 because index now does what it should)
$("div.style-box").live('click', function() {
//get index of div clicked
var index = $(this).prevAll().length;
//select the corresponding option in the hidden select
$('#style>option').eq(index).attr('selected', true);
});
OTHER TIPS
Using this plugin: http://dev.jquery.com/browser/trunk/plugins/selectboxes You can do this:
$("#style-box-light").click(function() {
$("#style").selectOptions("1");
});