У меня есть атрибут "test" в моем классе .option и я могу выбрать опции.
Если в массиве есть атрибут "test" в опции: selected, то я хочу показать продолжение.опция с одним или несколькими одинаковыми значениями массива атрибута «test».
Если кто-то выберет опцию, то ранее выбранный родительский класс .option массива атрибута «test» не существует, затем скрытьвсе исходящие классы .option.
Первый фрагмент такой, какой он есть сейчас.
Второй фрагмент - результат, который мне нужен.
- Взять HTML-кодто есть 1,2,3, и добавьте его как data = "1,2,3" в select
- Возьмите HTML-код, т.е. 1,2,3, и добавьте его как data = "1,2,3 "для родительского класса с именем" option "
Это все для того, чтобы я мог ввести больше правил, определяющих, какие варианты выбора и опции отображаются или скрываются в зависимости от того, какие пользователи выбирают.
<div class="option">
<label for="" class="control-label fs-16">One Thing or One Thing Plus Accessory:</label>
<input type="hidden" name="b-BENTO8-option_610596" value="0">
<div class="row">
<div class="col-sm-8 col-md-7 col-lg-6">
<select class="form-control" name="b-BENTO8-option_values_610596_0" onchange="showAttachmentInput('0', this.value)" id="PRODUCT-610596-0">
<option class="opt" value="0" id="OPTION-610596-0-0-0">
No
</option>
<option class="opt" value="1" id="OPTION-610596-0-0-1">1, One Thing + $5.15</option>
<option class="opt" value="2" id="OPTION-610596-0-0-2">1, One Thing + $4.15</option>
<option class="opt" value="3" id="OPTION-610596-0-0-3">1, One Thing + $3.15</option>
<option class="opt" value="4" id="OPTION-610596-0-0-4">1, One Thing + $2.15</option>
<option class="opt" value="5" id="OPTION-610596-0-0-5">1, One Thing + $1.15</option>
<option class="opt" value="6" id="OPTION-610596-0-0-6">2, One Thing Plus Accessory + $6.75</option>
<option class="opt" value="7" id="OPTION-610596-0-0-7">2, One Thing Plus Accessory + $5.75</option>
<option class="opt" value="8" id="OPTION-610596-0-0-8">2, One Thing Plus Accessory + $4.75</option>
<option class="opt" value="9" id="OPTION-610596-0-0-9">2, One Thing Plus Accessory + $3.75</option>
<option class="opt" value="10" id="OPTION-610596-0-0-10">2, One Thing Plus Accessory + $2.75</option>
</select>
</div>
</div>
</div>
<div class="option">
<label for="" class="control-label fs-16">1,4,5, 1 Color Choice:</label>
<input type="hidden" name="b-BENTO8-option_610596" value="7">
<div class="row">
<div class="col-sm-8 col-md-7 col-lg-6">
<select class="form-control" name="b-BENTO8-option_values_610596_7" onchange="showAttachmentInput('7', this.value)" id="PRODUCT-610596-7">
<option class="opt" value="0" id="OPTION-610596-7-7-0">1,4,5, Blue</option>
<option class="opt" value="1" id="OPTION-610596-7-7-1">1,4,5, Green</option>
<option class="opt" value="2" id="OPTION-610596-7-7-2">1,4,5, Yellow</option>
<option class="opt" value="3" id="OPTION-610596-7-7-3">1,4,5, Red</option>
</select>
</div>
</div>
</div>
<div class="option">
<label for="" class="control-label fs-16">3,4, Optional Inside Label Setup Charge:</label>
<input type="hidden" name="b-BENTO8-option_610596" value="4">
<div class="row">
<div class="col-sm-8 col-md-7 col-lg-6">
<select class="form-control" name="b-BENTO8-option_values_610596_4" onchange="showAttachmentInput('4', this.value)" id="PRODUCT-610596-4">
<option class="opt" value="0" id="OPTION-610596-4-4-0">3,4, + $50.00</option>
<option class="opt" value="1" id="OPTION-610596-4-4-1">3,4, + $40.00</option>
<option class="opt" value="2" id="OPTION-610596-4-4-2">3,4, + $30.00</option>
<option class="opt" value="3" id="OPTION-610596-4-4-3">3,4, + $20.00</option>
<option class="opt" value="4" id="OPTION-610596-4-4-4">3,4, + $10.00</option>
</select>
</div>
</div>
</div>
<div class="option">
<label for="" class="control-label fs-16">One Thing or One Thing Plus Accessory:</label>
<input type="hidden" name="b-BENTO8-option_610596" value="0">
<div class="row">
<div class="col-sm-8 col-md-7 col-lg-6">
<select class="form-control" name="b-BENTO8-option_values_610596_0" onchange="showAttachmentInput('0', this.value)" id="PRODUCT-610596-0">
<option class="opt" value="0" id="OPTION-610596-0-0-0">
No
</option>
<option class="opt" value="1" id="OPTION-610596-0-0-1" data="1">One Thing + $5.15</option>
<option class="opt" value="2" id="OPTION-610596-0-0-2" data="1">One Thing + $4.15</option>
<option class="opt" value="3" id="OPTION-610596-0-0-3" data="1">One Thing + $3.15</option>
<option class="opt" value="4" id="OPTION-610596-0-0-4" data="1">One Thing + $2.15</option>
<option class="opt" value="5" id="OPTION-610596-0-0-5" data="1">One Thing + $1.15</option>
<option class="opt" value="6" id="OPTION-610596-0-0-6" data="2">One Thing Plus Accessory + $6.75</option>
<option class="opt" value="7" id="OPTION-610596-0-0-7" data="2">One Thing Plus Accessory + $5.75</option>
<option class="opt" value="8" id="OPTION-610596-0-0-8" data="2">One Thing Plus Accessory + $4.75</option>
<option class="opt" value="9" id="OPTION-610596-0-0-9" data="2">One Thing Plus Accessory + $3.75</option>
<option class="opt" value="10" id="OPTION-610596-0-0-10" data="2">One Thing Plus Accessory + $2.75</option>
</select>
</div>
</div>
</div>
<div class="option" data="1,4,5">
<label for="" class="control-label fs-16">1 Color Choice:</label>
<input type="hidden" name="b-BENTO8-option_610596" value="7">
<div class="row">
<div class="col-sm-8 col-md-7 col-lg-6">
<select class="form-control" name="b-BENTO8-option_values_610596_7" onchange="showAttachmentInput('7', this.value)" id="PRODUCT-610596-7">
<option class="opt" value="0" id="OPTION-610596-7-7-0" data="1,4,5">Blue</option>
<option class="opt" value="1" id="OPTION-610596-7-7-1" data="1,4,5">Green</option>
<option class="opt" value="2" id="OPTION-610596-7-7-2" data="1,4,5">Yellow</option>
<option class="opt" value="3" id="OPTION-610596-7-7-3" data="1,4,5">Red</option>
</select>
</div>
</div>
</div>
<div class="option" data="3,4">
<label for="" class="control-label fs-16"> Optional Inside Label Setup Charge:</label>
<input type="hidden" name="b-BENTO8-option_610596" value="4">
<div class="row">
<div class="col-sm-8 col-md-7 col-lg-6">
<select class="form-control" name="b-BENTO8-option_values_610596_4" onchange="showAttachmentInput('4', this.value)" id="PRODUCT-610596-4">
<option class="opt" value="0" id="OPTION-610596-4-4-0" data="3,4"> + $50.00</option>
<option class="opt" value="1" id="OPTION-610596-4-4-1" data="3,4"> + $40.00</option>
<option class="opt" value="2" id="OPTION-610596-4-4-2" data="3,4"> + $30.00</option>
<option class="opt" value="3" id="OPTION-610596-4-4-3" + $20.00</option>
<option class="opt" value="4" id="OPTION-610596-4-4-4" data="3,4"> + $10.00</option>
</select>
</div>
</div>
</div>
Понял, как добавить 1,2,3, к ".option" из текста метки.РЕДАКТИРОВАТЬ: Просто добавлена возможность удаления ошибочных чисел из текста метки.
$(".option > label").each(function() {
var s = $(this).text();
var pos = s.lastIndexOf(',');
var newchar = s.substring(0,pos);
var arrVars = s.split(",");
var lastVar = arrVars.pop();
var restVar = arrVars.join(",");
$(this).parent().attr('test',newchar);
$(this).html(lastVar);
});
Вот как добавить к опциям РЕДАКТИРОВАТЬ: Добавлено удаление для ошибочных чисел.
$("option").each(function() {
var s = $(this).text();
var pos = s.lastIndexOf(',');
var newchar = s.substring(0,pos).trim();
var arrVars = s.split(",");
var lastVar = arrVars.pop();
var restVar = arrVars.join(",");
$(this).attr('test',newchar);
$(this).html(lastVar);
});
Iпробный
//hide all dependent options with values
$('.option[test=""]').attr('test','999');
$('.option[test="999"]').hide();
var previous;
var splitP;
$("select").on('focus', function () {
previous = $(this).parent().parent().parent().attr('test');
splitP = previous.split(',');
}).change(function() {
var depend = $(this).find('option:selected');
var split1 = depend.attr('test').split(',');
var index = splitP.length - 1;
jQuery.each( splitP, function( index, val ) {
$(".option[test~='"+val+"']").hide();
});
var i = split1.length - 1;
jQuery.each( split1, function( i, val ) {
$(".option[test~='"+val+"']").show();
});
});
По сути, значения массива атрибутов "test" являются зависимостями для последующих параметров.Если первый параметр: selected имеет значение 1, тогда я хочу показать исходную опцию с атрибутом «test», равной 1. Если я выберу опцию, в которой есть несколько значений атрибута «test», таких как 1,4,5, то я 'Я хотел бы показать любой исходящий .option, который имеет 1,4,5.
С другой стороны, если предыдущий параметр: selected не имеет атрибута "test", скрыть исходящие классы .option.