Question

我有一个问题，我希望能够在解决方面找到一些方向 - 我正在构建一个包含显示产品选项的页面的电子商务网站。其中一个选项是通过选择样本来选择产品的颜色。选择样本后，使用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

试试这个：

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

这是使用.prop()将单选按钮设置为选中，并使用.val()获取所选option

的值

或在prop('name')

上使用val()代替option

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

或者如果使用jQuery＆lt; 1.6 - 您无法使用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

我假设您正在寻找捕获下拉（选择）更改事件。如果您已经在使用jQuery，可以在页面document.ready()方法中添加类似的内容来捕获该事件：

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

希望有所帮助。

Answer 3

我有几个问题，所以我们可以确定这个问题：

- 感谢代码！

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

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

HTML下拉列表选择单选按钮

3 个答案: