HTML dropdown list for radio button selection

I have a problem that I am hoping to get some direction in a solution - I am building an e-commerce site that includes a page displaying product options. One option is to choose the color of the product by sample selection. After selecting a sample using JQuery, the red border goes to the selected sample. At the same time the same color option is selected in the HTML dropdown / menu which works great. The problem comes when I want to do the opposite: when the user selects an option from the dropdown list, I need a matching swatch to have a border on it. Not my choice, but the way the client wants it.

I've searched everywhere I can, but none of the solutions I've found seem to work. Any guidance on this?


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');

            $('input[color=' + $(this).attr('color') + ']').click();


Html radio buttons and dropdown:

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



source to share

3 answers

Try the following:

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


Used here . prop () to set the switch as noted and . val () to get the value from the selectedoption

or using prop('name')

instead val()


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

or if jQuery <1.6 is used - you cannot use prop

, you must 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() {
    $('input[color=' + $(this).attr('color') + ']').prop('checked',true);


by adding a class selected

to each sample, change it to this:

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


this adds the class to the correct pattern. (note that you may need to enter a value from an option)



I am assuming you want to capture the dropdown (select) change event. Singe, you are already using jQuery, you can add something like this in your methods document.ready()

to capture this event:

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


Hope it helps.



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

-thanks for code!

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


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



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






All Articles