javascript - 用于选择单选按钮的 HTML 下拉列表

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()

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

或者如果使用 jQuery < 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);
});

这只会将类添加到正确的样本中。 (请注意，您可能必须将选项中的值小写)