希望您能提供帮助。我已经在“ .option”中添加了“ test”属性,然后选择了选项。
我正在尝试确保如果有人选择了某个选项,那么某些人选择了显示,这是可行的。但是,当我将选项改回“否”时,它应该删除从属选项,因为上面有一个未被选中的选项。
查看“可选内部标签设置费用:”,单击“是”(任何价格),然后单击“否...”,您将看到“可选内部标签设置费用”如何显示然后消失……这就是我要查找的内容,但对于我的第一选择根本不起作用。
老实说,我不知道它在做什么...
请参阅codepen。
https://codepen.io/liveitup278/pen/RqdPZv?editors=1010
function containsAny(source, target) {
var result = source.filter(function (item) {
return target.indexOf(item) > -1
});
return (result.length > 0);
}
// FINAL CODE for attributes to .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);
});
//hide all dependent options with values
$('.option[test=""]').attr('test', '999');
$('.option[test!="999"]').hide();
$('select').on('change', function () {
opSelSplit = [];
depend = $(this).find('option:selected');
opSelSplit = depend.attr('test').split(',');
$.each(opSelSplit, function (i, value1) {
$('.option').each(function (j, value2) {
opSplit = [];
opSplit = $(this).attr('test').split(',');
isYes = containsAny(opSplit, opSelSplit);
if (isYes == true) {
$(this).show();
}
});
});
var opSelSplit = $('select:visible option:selected').map(function () {
return $(this).attr('test');
}).get();
$.each(opSelSplit, function (i, e) {
t1 = $('.option').find('select:visible option:not(:selected)[test="' + e + '"]').parent().parent().parent().parent().index();
t2 = $('.option').find('select:visible option:selected[test="' + e + '"]').parent().parent().parent().parent().index();
if (t2 > t1) {
$('.option').find('select:visible option:selected[test="' + e + '"]').parent().parent().parent().parent().hide()
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="productOptionName">
<input type="hidden" name="optionCode_610596_" value="b-BENTO8">
<input type="hidden" name="optionCode_610596" value="b-BENTO8">
<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>
<input type="hidden" name="optionCode_610596_" value="b-BENTO8">
<input type="hidden" name="optionCode_610596" value="b-BENTO8">
<div class="option">
<label for="" class="control-label fs-16">1, One Thing Run Charge:</label>
<input type="hidden" name="b-BENTO8-option_610596" value="1">
<div class="row">
<div class="col-sm-8 col-md-7 col-lg-6">
<select class="form-control" name="b-BENTO8-option_values_610596_1" onchange="showAttachmentInput('1', this.value)" id="PRODUCT-610596-1">
<option class="opt" value="0" id="OPTION-610596-1-1-0">
1,
+
$0.50
</option>
<option class="opt" value="1" id="OPTION-610596-1-1-1">
1,
+
$0.40
</option>
<option class="opt" value="2" id="OPTION-610596-1-1-2">
1,
+
$0.30
</option>
<option class="opt" value="3" id="OPTION-610596-1-1-3">
1,
+
$0.20
</option>
<option class="opt" value="4" id="OPTION-610596-1-1-4">
1,
+
$0.10
</option>
</select>
</div>
</div>
</div>
<input type="hidden" name="optionCode_610596_" value="b-BENTO8">
<input type="hidden" name="optionCode_610596" value="b-BENTO8">
<div class="option">
<label for="" class="control-label fs-16">2, One Thing Plus Accessory Run Charge:</label>
<input type="hidden" name="b-BENTO8-option_610596" value="2">
<div class="row">
<div class="col-sm-8 col-md-7 col-lg-6">
<select class="form-control" name="b-BENTO8-option_values_610596_2" onchange="showAttachmentInput('2', this.value)" id="PRODUCT-610596-2">
<option class="opt" value="0" id="OPTION-610596-2-2-0">
2,
+
$0.80
</option>
<option class="opt" value="1" id="OPTION-610596-2-2-1">
2,
+
$0.70
</option>
<option class="opt" value="2" id="OPTION-610596-2-2-2">
2,
+
$0.60
</option>
<option class="opt" value="3" id="OPTION-610596-2-2-3">
2,
+
$0.50
</option>
<option class="opt" value="4" id="OPTION-610596-2-2-4">
2,
+
$0.40
</option>
</select>
</div>
</div>
</div>
<input type="hidden" name="optionCode_610596_" value="b-BENTO8">
<input type="hidden" name="optionCode_610596" value="b-BENTO8">
<div class="option">
<label for="" class="control-label fs-16">Optional Inside Label Run Charge:</label>
<input type="hidden" name="b-BENTO8-option_610596" value="3">
<div class="row">
<div class="col-sm-8 col-md-7 col-lg-6">
<select class="form-control" name="b-BENTO8-option_values_610596_3" onchange="showAttachmentInput('3', this.value)" id="PRODUCT-610596-3">
<option class="opt" value="0" id="OPTION-610596-3-3-0">
No
</option>
<option class="opt" value="1" id="OPTION-610596-3-3-1">
3, Yes
+
$1.80
</option>
<option class="opt" value="2" id="OPTION-610596-3-3-2">
3, Yes
+
$1.75
</option>
<option class="opt" value="3" id="OPTION-610596-3-3-3">
3, Yes
+
$1.50
</option>
<option class="opt" value="4" id="OPTION-610596-3-3-4">
3, Yes
+
$1.25
</option>
</select>
</div>
</div>
</div>
<input type="hidden" name="optionCode_610596_" value="b-BENTO8">
<input type="hidden" name="optionCode_610596" value="b-BENTO8">
<div class="option">
<label for="" class="control-label fs-16">3, 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,
+
$50.00
</option>
<option class="opt" value="1" id="OPTION-610596-4-4-1">
3,
+
$40.00
</option>
<option class="opt" value="2" id="OPTION-610596-4-4-2">
3,
+
$30.00
</option>
<option class="opt" value="3" id="OPTION-610596-4-4-3">
3,
+
$20.00
</option>
<option class="opt" value="4" id="OPTION-610596-4-4-4">
3,
+
$10.00
</option>
</select>
</div>
</div>
</div>
<input type="hidden" name="optionCode_610596_" value="b-BENTO8">
<input type="hidden" name="optionCode_610596" value="b-BENTO8">
<div class="option">
<label for="" class="control-label fs-16">Under 250 Run Charge Fee:</label>
<input type="hidden" name="b-BENTO8-option_610596" value="5">
<div class="row">
<div class="col-sm-8 col-md-7 col-lg-6">
<select class="form-control" name="b-BENTO8-option_values_610596_5" onchange="showAttachmentInput('5', this.value)" id="PRODUCT-610596-5">
<option class="opt" value="0" id="OPTION-610596-5-5-0">
+
$0.50
</option>
<option class="opt" value="1" id="OPTION-610596-5-5-1">
+
$0.40
</option>
<option class="opt" value="2" id="OPTION-610596-5-5-2">
+
$0.30
</option>
<option class="opt" value="3" id="OPTION-610596-5-5-3">
+
$0.20
</option>
<option class="opt" value="4" id="OPTION-610596-5-5-4">
+
$0.10
</option>
</select>
</div>
</div>
</div>
<input type="hidden" name="optionCode_610596_" value="b-BENTO8">
<input type="hidden" name="optionCode_610596" value="b-BENTO8">
<div class="option">
<label for="" class="control-label fs-16">1,2, How Many Colors?:</label>
<input type="hidden" name="b-BENTO8-option_610596" value="6">
<div class="row">
<div class="col-sm-8 col-md-7 col-lg-6">
<select class="form-control" name="b-BENTO8-option_values_610596_6" onchange="showAttachmentInput('6', this.value)" id="PRODUCT-610596-6">
<option class="opt" value="0" id="OPTION-610596-6-6-0">
1, 1 Color Choice
</option>
<option class="opt" value="1" id="OPTION-610596-6-6-1">
4, 2 Color Choices
+
$2.00
</option>
<option class="opt" value="2" id="OPTION-610596-6-6-2">
5, 3 Color Choices
+
$1.00
</option>
</select>
</div>
</div>
</div>
<input type="hidden" name="optionCode_610596_" value="b-BENTO8">
<input type="hidden" name="optionCode_610596" value="b-BENTO8">
<div class="option">
<label for="" class="control-label fs-16">1,2,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">
Blue
</option>
<option class="opt" value="1" id="OPTION-610596-7-7-1">
Green
</option>
<option class="opt" value="2" id="OPTION-610596-7-7-2">
Yellow
</option>
<option class="opt" value="3" id="OPTION-610596-7-7-3">
Red
</option>
</select>
</div>
</div>
</div>
<input type="hidden" name="optionCode_610596_" value="b-BENTO8">
<input type="hidden" name="optionCode_610596" value="b-BENTO8">
<div class="option">
<label for="" class="control-label fs-16">4,5, 2nd Color Choice:</label>
<input type="hidden" name="b-BENTO8-option_610596" value="8">
<div class="row">
<div class="col-sm-8 col-md-7 col-lg-6">
<select class="form-control" name="b-BENTO8-option_values_610596_8" onchange="showAttachmentInput('8', this.value)" id="PRODUCT-610596-8">
<option class="opt" value="0" id="OPTION-610596-8-8-0">
Blue
</option>
<option class="opt" value="1" id="OPTION-610596-8-8-1">
Green
</option>
<option class="opt" value="2" id="OPTION-610596-8-8-2">
Yellow
</option>
<option class="opt" value="3" id="OPTION-610596-8-8-3">
Red
</option>
</select>
</div>
</div>
</div>
<input type="hidden" name="optionCode_610596_" value="b-BENTO8">
<input type="hidden" name="optionCode_610596" value="b-BENTO8">
<div class="option">
<label for="" class="control-label fs-16">5, 3rd Color Choice:</label>
<input type="hidden" name="b-BENTO8-option_610596" value="9">
<div class="row">
<div class="col-sm-8 col-md-7 col-lg-6">
<select class="form-control" name="b-BENTO8-option_values_610596_9" onchange="showAttachmentInput('9', this.value)" id="PRODUCT-610596-9">
<option class="opt" value="0" id="OPTION-610596-9-9-0">
Blue
</option>
<option class="opt" value="1" id="OPTION-610596-9-9-1">
Green
</option>
<option class="opt" value="2" id="OPTION-610596-9-9-2">
Yellow
</option>
<option class="opt" value="3" id="OPTION-610596-9-9-3">
Red
</option>
</select>
</div>
</div>
</div>
</div>