HTMLラジオボタンを選択するドロップダウンリスト

Question

私は解決の方向性を得ることを望んでいるという問題があります。私は、製品オプションを表示するページを含む電子商取引サイトを構築しています。オプションの1つは、色見本を選択して製品の色を選択することです。スウォッチが選択されると、JQueryを使用して、赤い枠線が選択されたスウォッチに移動します。同時に、HTMLドロップダウンリスト/メニューで同じカラーオプションが選択され、完全に機能します。この問題は、逆順を実行したいときに発生します。ユーザーがドロップダウンリストからオプションを選択すると、対応するスウォッチに境界線が必要です。私の選択ではありませんが、それは顧客が望む方法です。

私はどこでも見ることができましたが、私が見つけたソリューションのどれもうまくいかないようです。これに関するガイダンスは？

は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(); 
     }); 
    }); 

HTMLのラジオボタンとドロップダウンリスト：

<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

これを試してみてください：これはとラジオボタンを設定する.prop()を使用している

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

チェックし、.val()から値を取得するoption

またはoption

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

やjQueryの< 1.6を使用している場合val()の代わりにprop('name')を使用して - あなたはpropを使用することはできません、あなたは.attr()

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

Working example hereを使用する必要があります

あなたのサイトを見て - 問題が明確である：

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

あなたはすべての色見本にselectedクラスを追加し、このように変更します。

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

これが唯一の正しいにクラスを追加しますスワッチ。

Answer 2

私はあなたがドロップダウン（選択）変更イベントをキャプチャしようとしていると仮定しています。あなたはすでにあなたがそのイベントをキャプチャするためにあなたのページにdocument.ready()方法をこのようなものを置くことができ、jQueryのを使用している焦がす：

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

お役に立てば幸いです。コードの

-thanks：

Answer 3

私はカップルのように、我々は、これが釘付け取得することができますあなたのための質問があります！

一般的には、ドロップダウンの 'onchange'属性に適切なスウォッチに境界線を配置する必要があるjavascript機械をすべて添付する必要があると思います。あなたが任意のコードを持っていますか

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! 
} 

種類よろしく、

SF