Question

我有两个选择元素（第一个是尺寸，第二个是颜色）。我无法在此代码中进行两次调整，我需要帮助才能了解如何继续。

第一：当我选择一个选项（单选按钮）时，我正在使用一个名为'checked'的类。然而问题是当我选择第二个选项（颜色）时，我需要在第一个选项（大小）中保持“检查”类。

第二：如果不先选择尺寸（第一个选项），用户就无法选择第二个选项（颜色）。所以我需要禁用颜色选项，直到用户选择一个大小。

HTML

<select name="iluria-product-variation1" id="iluria-product-variation1" onchange="selectedVariation1()">
<option value="0" id="default-variation-1" selected="selected">Tamanho</option>
<option value="2DE650" class="variation1-option">PP</option>
<option value="2DE651" class="variation1-option">P</option>
<option value="2DE652" class="variation1-option">M</option>
<option value="2DE653" class="variation1-option">G</option>
<option value="2DE654" class="variation1-option">GG</option></select>

<select name="iluria-product-variation2" id="iluria-product-variation2" onchange="selectedVariation2()">
<option value="0" id="default-variation-2" selected="selected">Cor</option>
<option value="2DE655" class="variation2-option">Amarelo</option>
<option value="2DE661" class="variation2-option">Vinho</option>
<option value="2DE660" class="variation2-option">Vermelho</option>
<option value="2DE65F" class="variation2-option">Verde</option>
<option value="2DE65E" class="variation2-option">Roxo</option>
<option value="2DE65D" class="variation2-option">Rosa</option>
<option value="2DE65C" class="variation2-option">Preto</option>
<option value="2DE65B" class="variation2-option">Marrom</option>
<option value="2DE65A" class="variation2-option">Laranja</option>
<option value="2DE659" class="variation2-option">Dourado</option>
<option value="2DE658" class="variation2-option">Cinza</option>
<option value="2DE657" class="variation2-option">Branco</option>
<option value="2DE656" class="variation2-option">Azul</option>
<option value="2DE662" class="variation2-option">Violeta</option>

JS

$('select#iluria-product-variation1, select#iluria-product-variation2').each(function(i, select){
var $select = jQuery(select);
$select.find('option').each(function(j, option){
var $option = jQuery(option);
// Create a radio:
var $radio = jQuery('<input type="radio" />');
// Set name and value:
$radio.attr('name', $select.attr('name')).attr('value', $option.val()).attr('id', $option.text());
// Set checked if the option was selected
if ($option.attr('selected')) $radio.attr('checked', 'checked');
// Insert radio before select box:
    $select.before($radio);
    $radio.wrap('<div class="vari-option fix" />');
// Insert a label:
$radio.before(
    $("<label />").attr('for', $option.text()).text($option.text()).addClass($option.text())
);
    $(".product-variations-container").css("display", "block");
});
}); 

$(':radio').click(function(){
$(this).parent().parent().find('label').removeClass('checked');
$(this).siblings('label').addClass('checked');
$choice = $(this).attr('value');
$('select#iluria-product-variation1 option[value=' + $choice + ']').attr('selected',true).parent().trigger('change');
$('select#iluria-product-variation2 option[value=' + $choice + ']').attr('selected',true).parent().trigger('change');
});

关于JSFiddle的示例 - http://jsfiddle.net/3kzmq12g/2/

欢迎任何帮助，谢谢！

Answer 1

你可以使用属性选择器和.on（）方法来实现你想要的东西，基本上你只需要添加一个on（）监听器来查看第一组单选按钮是否被选中。

stdlib.h

<强> FIDDLE HERE

转换：使用Jquery

1 个答案: