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

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

• javascript
• jquery
• html

• 1 Do you have any code? Can you show it please? – Hamza Waqas Commented Mar 29, 2012 at 15:58
• how does the swatch relate to the option ? – Manse Commented Mar 29, 2012 at 15:59
• The swatch and option are related in that they are the same in terms of Value and Name, respectively. – jbrown574 Commented Mar 29, 2012 at 16:06

3 Answers 3

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)

I'm assuming you're looking to capture the drop down (select) change event. Singe you're already using jQuery, you could put something like this in your pages document.ready() method to capture that event:

$('#colorDropDown').change(function() {
  // Add the red border to your swatch.
});

Hope that helps.

I have a couple questions for you so we can get this nailed down:

-thanks for the code!

As for direction in general, I think you need to attach whatever javascript machinery you have to place the border on the appropriate swatch, on the 'onchange' attribute of your dropdown. Your code might look something like this:

HTML

<select name=yourdropdown onchange='selectSwatch(this.form.yourdropdown);'>

Javascript

function selectSwatch(dropdown){
     // code to change the swatch...like some of these other guys' answers!
     // They have a lot more experience than I do!
}

Kind Regards,

sf