Question

我的.option类中具有“测试”属性，然后选择选项。

如果在数组中，选项：selected中有一个“测试”属性，则我要显示带有“测试”属性的一个或多个相同数组值的进行中的.option。

如果有人选择一个选项，那么先前选择的“测试”属性数组的父.option类不存在，则隐藏所有进行中的.option类。

第一个片段现在是这样。

第二个片段是我想要的结果。

采用HTML代码1,2,3，然后将其添加为select内的data =“ 1,2,3”
获取HTML代码即1,2,3，并将其作为data =“ 1,2,3”添加到称为“选项”的父类中

这一切都是为了让我引入更多规则，这些规则决定根据用户选择的内容显示或隐藏哪些选择和选项。

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

我尝试了

//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”属性数组值是进行程序选项的依赖项。如果first option：selected的值为1，那么我想显示“ test”属性为1的继续选项。如果我选择一个包含多个“测试”属性值（例如1,4,5）的选项，那么我想显示具有1,4,5的任何继续.options。

另一方面，如果前面的option：selected不具有“ test”属性，则将.option类继续进行。

如何使用selects / options显示和不显示.option类

0 个答案: