Javascript 选择单选按钮的HTML下拉列表

我有一个问题，我希望得到一些解决方向-我正在建立一个电子商务网站，其中包括一个页面显示产品选项。其中一个选项是通过选择样例来选择产品的颜色。使用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();
        });
    });

jQuery（文档）.ready（函数（$）{
$（'.复选框输入'）。每个（函数（索引，值）
{
$（this）.parent（）.prepend（“请尝试以下操作：

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

这用于将单选按钮设置为选中状态，并从所选的
选项中获取值

或者在
选项上使用
prop（'name'）
而不是
val（）

$（'input[color='+$（this.prop（'name'）+']）.prop（'checked'，true）；

或者如果使用jQuery<1.6-您不能使用
prop
，您必须使用

$（'input[color='+$（this.val（）+']）.attr（'checked'，'checked'）；


查看您的站点-问题很明显：

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

如果要将所选的
类添加到每个样例，请将其更改为：

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

这只会将类添加到正确的样例中。（注意，您可能必须将选项中的值小写）
我假设您正在寻找捕获下拉（选择）更改事件的方法。如果您已经在使用jQuery，您可以在页面
文档中放置类似的内容。ready（）
方法捕获该事件：

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

希望这能有所帮助。
我有几个问题要问你，以便我们能把问题解决：

-谢谢你的代码

至于一般的方向，我认为您需要在下拉列表的“onchange”属性中将边界放置在适当的样例上，并附加任何javascript机制。您的代码可能如下所示：

HTML

亲切问候,

sf
你有任何代码吗？你能展示一下吗？样例与选项的关系如何？样例和选项的关系在于它们在值和名称上分别是相同的。这就是我所想的……下拉列表需要一个onchange事件……我认为这是正确的轨道，但我似乎无法得到我想要的“我无法处理所有问题……我将其包含在上面的JQuery代码中，样例似乎没有改变。@jbrown574您能用代码创建一个实例吗？或者调试它并告诉我问题所在吗？在不知道问题是什么的情况下，很难提供帮助！在尝试在JSFIDLE中处理所有问题后，我放弃了。我可以请在我的beta测试区域中向您发送指向该页面的url，以便您更好地了解我正在尝试执行的操作：我按照您的建议执行了操作，但仍然存在问题。要澄清-将下拉列表中的值小写，对吗？目前，选项标记中没有设置值。此行出现“未定义”错误：$（'div[color='+）$（this.attr（'color'）+']'））.addClass（'selected'）；
$('#colorDropDown').change(function() {
  // Add the red border to your swatch.
});

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

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