Question

Currently I am turning a select menu into a colour swatch, and I now at the stage where when a user clicks a colour swatch, I need the relevant select option to become selected.

The swathches get built with the following html

<div class="option red"></div>

the colour in the class definition is derived from the available options in the select, what I now need to do is if the red box clicked make the red option selected. So far I have the following code,

$('fieldset.colours option').each(function(){
    $('.colours').append('<div class="option '+$(this).val().toLowerCase()+'"></div>')
});

$('.option').click(function(){
    var classList =$(this).attr('class').split(/\s+/);
    $.each( classList, function(index, item){
        if (item != 'option') {

        }
    });

});

Answer 1

You could probably try :

$('.option').click(function () {
    var selectedOption = $(this);

    $('fieldset.colours option').each(function () {
        if (selectedOption.hasClass( $(this).val().toLowerCase() )) {
            $('fieldset.colours').val( $(this).val().toLowerCase() );
        }
    });
});