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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9929039/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 08:15:48  来源:igfitidea点击:

HTML Drop Down List to Select Radio Button

javascriptjqueryhtml

提问by jbrown574

I have a problem that I'm hoping to get some direction in solving - I'm building an eCommerce site that includes a page displaying product options. One of the options is selecting the product's color by selecting a swatch. Once the swatch is selected, using JQuery, a red border goes on the selected swatch. At the same time, the same color option is selected in an HTML drop down list/menu, which works perfectly. The problem comes when I want the reverse done: when a user selects the option from the drop down list, I need the corresponding swatch to have a border on it. Not my choice, but that's the way the customer wants it.

我有一个问题,希望得到一些解决的方向 - 我正在构建一个电子商务网站,其中包含一个显示产品选项的页面。选项之一是通过选择色板来选择产品的颜色。使用 JQuery 选择色板后,所选色板上会出现红色边框。同时,在HTML下拉列表/菜单中选择了相同的颜色选项,效果很好。当我想要反向完成时,问题就出现了:当用户从下拉列表中选择选项时,我需要相应的色板在上面有一个边框。不是我的选择,但这是客户想要的方式。

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

我已经到处寻找,但我找到的解决方案似乎都不起作用。关于这个的任何指导?

The JQuery:

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

The html radio buttons and drop down list:

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

采纳答案by Manse

Try this :

试试这个 :

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

This is using .prop()to set the radio button as checked, and .val()to get the value from the selected option

这是使用.prop()将单选按钮设置为选中状态,并使用.val()从选定的值中获取值option

or using prop('name')instead of val()on the option

或使用prop('name'),而不是val()option

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

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

or if using jQuery < 1.6 - you cannot use prop, you have to use .attr()

或者如果使用 jQuery < 1.6 - 你不能使用prop,你必须使用.attr()

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

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

Working example here

这里的工作示例

Looking at your site - the problem is clear :

查看您的网站 - 问题很明显:

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

your adding the selectedclass to every swatch, change it to this :

您将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);
});

this only adds the class to the correct swatch. (note you might have to lowercase the value from the option)

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

回答by rag9

I'm assuming you're looking to capture the drop down (select) change event. Singe you're already using jQuery, you could put something like this in your pages document.ready()method to capture that event:

我假设您希望捕获下拉(选择)更改事件。Singe 你已经在使用 jQuery,你可以在你的 pagesdocument.ready()方法中放置这样的东西来捕获该事件:

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

Hope that helps.

希望有帮助。

回答by sacredfaith

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

我有几个问题要问你,所以我们可以确定下来:

-thanks for the code!

- 感谢您的代码!

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

至于一般的方向,我认为您需要在下拉列表的“onchange”属性上附加任何必须将边框放置在适当样本上的javascript机器。您的代码可能如下所示:

HTML

HTML

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

Javascript

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

Kind Regards,

亲切的问候,

sf

顺丰