无法获取相关选项。看到里面的例子

时间:2018-12-03 07:31:17

标签: javascript jquery select options

希望您能提供帮助。我已经在“ .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>

0 个答案:

没有答案