Question

I have a problem that I’m hoping to get some direction in solving – I’m building an eCommerce site that includes a page displaying product options. One of the options is selecting the product’s color by selecting a swatch. Once the swatch is selected, using JQuery, a red border goes on the selected swatch. At the same time, the same color option is selected in an HTML drop down list/menu, which works perfectly. The problem comes when I want the reverse done: when a user selects the option from the drop down list, I need the corresponding swatch to have a border on it. Not my choice, but that’s the way the customer wants it.

I’ve looked everywhere that I can but none of the solutions I’ve found seem to work. Any guidance on this one?

The JQuery:

jQuery(document).ready(function($) {
        $('.checkboxes input').each(function(index, value)
        {
            $(this).parent().prepend('<div class="color" color="' + $(this).attr('color') + '" style="background: url(\'../../../../images/textiles/' + $(this).attr('color') + '.jpg\')"> </div');
        });

        $('.color').click(function(e){
            //alert($(this).attr('color'));
            $('.color').removeClass('selected');
            $(this).addClass('selected');
            $('input[color=' + $(this).attr('color') + ']').click();
        });
    });

The html radio buttons and drop down list:

<div class="checkboxes">

<input type="radio" onclick="javascript:void 
goToOption(document.gobag.color_list,'Multicam')" color="multicam" name="color"  
value="Multicam" style="visibility: hidden"/>

<input type="radio" onclick="javascript:void 
goToOption(document.gobag.color_list,'Marpat')" color="marpat" name="color" 
value="Marpat" style="visibility: hidden"/>

<input type="radio" onclick="javascript:void goToOption(document.gobag.color_list,'UC')" 
color="UC" name="color" value="UC"style="visibility: hidden"/>

<input type="radio" onclick="javascript:void 
goToOption(document.gobag.color_list,'Coyote')" color="coyote" name="color" 
value="Coyote" style="visibility: hidden"/>

<input type="radio" onclick="javascript:void 
goToOption(document.gobag.color_list,'Khaki')" color="khaki" name="color" value="Khaki" 
style="visibility: hidden"/>

<input type="radio" onclick="javascript:void 
goToOption(document.gobag.color_list,'Foliage')" color="foliage" name="color" 
value="Foliage" style="visibility: hidden"/>

<input type="radio" onclick="javascript:void 
goToOption(document.gobag.color_list,'Black')" color="black" name="color" value="Black" 
style="visibility: hidden" />

</div></span><br />

    <select name="color_list" onchange="">
    <option selected="selected">Select a Color</option>
    <option name="Black" >Black</option>
    <option name="Foliage" >Foliage</option>
    <option name="Khaki" >Khaki</option>
    <option name="Coyote" >Coyote</option>
    <option name="UC" >UC</option>
    <option name="Marpat" >Marpat</option>
    <option name="Multicam" >Multicam</option>
    </select><br /><br />

Answer 1

Try this :

$('select[name="color_list"]').change(function() {
  $('input[color=' + $(this).val() + ']').prop('checked',true);
});

This is using .prop() to set the radio button as checked, and .val() to get the value from the selected option

or using prop('name') instead of val() on the option

$('input[color=' + $(this).prop('name') + ']').prop('checked',true);

or if using jQuery < 1.6 – you cannot use prop, you have to use .attr()

$('input[color=' + $(this).val() + ']').attr('checked','checked');

Working example here

Looking at your site – the problem is clear :

$('select[name="color_list"]').change(function() {
    $('.color').removeClass('selected');                                           
    $('.color').addClass('selected');
    $('input[color=' + $(this).attr('color') + ']').prop('checked',true);
});

your adding the selected class to every swatch, change it to this :

$('select[name="color_list"]').change(function() {
    $('.color').removeClass('selected');                                           
    $('div[color=' + $(this).attr('color') + ']').addClass('selected');
    $('input[color=' + $(this).attr('color') + ']').prop('checked',true);
});

this only adds the class to the correct swatch. (note you might have to lowercase the value from the option)