显示隐藏选择框并根据选择选择框选项

Question

我有一个JSON数组来隐藏特定的选项并根据selection选择框.Parent选项和值用于选择和子选项和值应隐藏在该选择上。它没有按预期工作。这是当前发生的40mm energisprosser从Sprosser选择它隐藏了Udluftningsventil和Udluftningsventil选择框，它也隐藏了来自Not选择框的值，即Ingen not和Not sider og top 。

实际上它应该只隐藏Udluftningsventil和Udluftningsventil选择框而不是。 Ingen not and Not sider og top

当55mm energisprosser选择时，它应该隐藏Ingen not而Not sider og top仅仅隐藏Not sider og top 。

 var dependentspecArray = '{"width":{"50":{"parentoptions":["Bundtrin"],"childoptions":["Dørhåndtag"],"parentvalue":["Hårdttræ bundtrin"],"childvalue":["Håndtag for skydedør"]}},"height":{"50":{"parentoptions":["Sprosser","Sprosser","Sprosser"],"childoptions":["Udluftningsventil","Not","Not"],"parentvalue":["40mm energisprosser","55mm energisprosser","55mm energisprosser"],"childvalue":["all","Not sider og top","Ingen not"]}}}'; function selectSpec(ele) { var inputvalue = ele.value; var selectname = ele.name; var mainName = selectname.replace("specification_", ""); param = "spectfication_" + mainName + "=" + inputvalue; //+"&color_type=1"; var selectedvalue = jQuery.trim(jQuery('option:selected', ele).text()); var selectedoption = jQuery.trim(jQuery('#' + selectname + '-accordion label').contents().get(0).nodeValue); restrictSpecification(selectedoption, selectedvalue); } function restrictSpecification(selectedoption, selectedvalue) { if (typeof dependentspecArray !== 'undefined') { var height = 50; jQuery.each(JSON.parse(dependentspecArray), function(firstkey, firstval) { if (firstkey == 'height') { jQuery.each(firstval, function(secondkey, secondval) { if (height <= secondkey) { var $i = 0; if (selectedoption == secondval.parentoptions[$i]) { jQuery('.a-layout').each(function() { //console.log(jQuery(this).parent('select').attr('id')); var selectIdInner = jQuery(this).parent('select').attr('id'); var loopoption = jQuery.trim(jQuery('#' + selectIdInner + '-accordion label').contents().get(0).nodeValue); var loopoptionvalue = jQuery.trim(jQuery(this).text()); if (jQuery.inArray(jQuery.trim(loopoption.replace(':', '')), secondval.childoptions) != -1 && jQuery.inArray(jQuery.trim(loopoptionvalue), secondval.childvalue) != -1 && jQuery.inArray(selectedvalue, secondval.parentvalue) != -1 && jQuery.inArray(selectedoption, secondval.parentoptions) != -1) { jQuery(this).hide(); } else { jQuery(this).show(); } if (loopoption == secondval.childoptions[$i] && selectedvalue == secondval.parentvalue[$i] && selectedoption == secondval.parentoptions[$i] && secondval.childvalue[$i] == 'all') { jQuery('#' + selectIdInner + '-accordion-content').prev('h3').hide(); jQuery(this).parent('select').hide(); } else { jQuery('#' + selectIdInner + '-accordion-content').prev('h3').show(); jQuery(this).parent('select').show(); } }); } } $i++; }); } }); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3 class="specification-head"> <a id="specification_23-accordion" class="custom-accordion" href="javascript:void(0)"> <label for="specification_23"> Sprosser</label> </a> </h3> <div id="specification_23-accordion-content" class="two-fields accordian-specification"> <div class="select-box"> <select name="specification_23" id="specification_23" class="crossbaroption specification-option " onchange="selectSpec(this,'','','','');"> <option class="a-layout" value="50"> 25mm energisprosser </option> <option class="a-layout" value="51"> 40mm energisprosser </option> <option class="a-layout" value="52"> 55mm energisprosser </option> <option class="a-layout" value="53"> 85 mm gennemgående sprosser </option> <option class="a-layout" value="54"> 18mm indvendige energisprosser </option> <option class="a-layout" value="55"> 26mm indvendige energisprosser </option> <option class="a-layout" value="56"> 45mm indvendige energisprosser </option> </select> </div> </div> <h3 class="specification-head" style="display: block;"> <a id="specification_25-accordion" class="custom-accordion" href="javascript:void(0)"> <label for="specification_25"> Udluftningsventil</label> </a> </h3> <div id="specification_25-accordion-content" class="two-fields accordian-specification"> <div class="select-box"> <select name="specification_25" id="specification_25" class="specification-option " onchange="selectSpec(this,'','','','');"> <option class="a-layout" selected="selected" value="75"> Ingen udluftningsventil </option> <option class="a-layout" value="198"> Udluftningsventil </option> </select> </div> </div> <h3 class="specification-head"> <a id="specification_5-accordion" class="custom-accordion" href="javascript:void(0)"> <label for="specification_5"> Not</label> </a> </h3> <div id="specification_5-accordion-content" class="two-fields accordian-specification"> <div class="select-box"> <select name="specification_5" id="specification_5" class="specification-option " onchange="selectSpec(this,'','','','');"> <option class="a-layout" value="26"> Not hele vejen rundt </option> <option class="a-layout" value="23"> Ingen not </option> <option class="a-layout" value="24"> Not i bunden </option> <option class="a-layout" value="25"> Not sider og top </option> </select> </div> </div> <h3 class="specification-head"> <a id="specification_6-accordion" class="custom-accordion" href="javascript:void(0)"> <label for="specification_6"> Garanti</label> </a> </h3> <div id="specification_6-accordion-content" class="two-fields accordian-specification"> <div class="select-box"> <select name="specification_6" id="specification_6" class="specification-option " onchange="selectSpec(this,'','','','');"> <option class="a-layout" selected="selected" value="27"> 10 års garanti </option> </select> </div> </div> 

我的代码也可以在JSFIDDLE上找到

Answer 1

这是答案

HTML代码JSFIDDLE

 <h3 class="specification-head">
   <a id="specification_23-accordion" class="custom-accordion" href="javascript:void(0)">
   <label for="specification_23">
   Sprosser</label>
   </a>
</h3>
<div id="specification_23-accordion-content" class="two-fields accordian-specification">
   <div class="select-box">
      <select name="specification_23" id="specification_23" class="crossbaroption specification-option "  onchange="selectSpec(this,'','','','');">
         <option class="a-layout" value="50">
            25mm energisprosser
         </option>
         <option class="a-layout" value="51">
            40mm energisprosser
         </option>
         <option class="a-layout" value="52">
            55mm energisprosser
         </option>
         <option class="a-layout" value="53">
            85 mm gennemgående sprosser
         </option>
         <option class="a-layout" value="54">
            18mm indvendige energisprosser
         </option>
         <option class="a-layout" value="55">
            26mm indvendige energisprosser
         </option>
         <option class="a-layout" value="56">
            45mm indvendige energisprosser
         </option>
      </select>
   </div>
</div>
<h3 class="specification-head" style="display: block;">
   <a id="specification_25-accordion" class="custom-accordion" href="javascript:void(0)">
   <label for="specification_25">
   Udluftningsventil</label>
   </a>
</h3>
<div id="specification_25-accordion-content" class="two-fields accordian-specification">
   <div class="select-box">
      <select name="specification_25" id="specification_25" class="specification-option "  onchange="selectSpec(this,'','','','');">
         <option class="a-layout" selected="selected" value="75">
            Ingen udluftningsventil
         </option>
         <option class="a-layout" value="198">
            Udluftningsventil
         </option>
      </select>
   </div>
</div>
<h3 class="specification-head">
   <a id="specification_5-accordion" class="custom-accordion" href="javascript:void(0)">
   <label for="specification_5">
   Not</label>
   </a>
</h3>
<div id="specification_5-accordion-content" class="two-fields accordian-specification">
   <div class="select-box">
      <select name="specification_5" id="specification_5" class="specification-option "  onchange="selectSpec(this,'','','','');">
       <option class="a-layout" value="26">
            Not hele vejen rundt
         </option>
         <option class="a-layout" value="23">
            Ingen not
         </option>
         <option class="a-layout" value="24">
            Not i bunden
         </option>
         <option class="a-layout" value="25">
            Not sider og top
         </option>

      </select>
   </div>
</div>
<h3 class="specification-head">
   <a id="specification_6-accordion" class="custom-accordion" href="javascript:void(0)">
   <label for="specification_6">
   Garanti</label>
   </a>
</h3>
<div id="specification_6-accordion-content" class="two-fields accordian-specification">
   <div class="select-box">
      <select name="specification_6" id="specification_6" class="specification-option "  onchange="selectSpec(this,'','','','');">
         <option class="a-layout" selected="selected" value="27">
            10 års garanti
         </option>
      </select>
   </div>
</div>

和js代码如下。需要稍微修改json数组。

 var dependentspecArray= '{"width":{"50":{"parentoptions":["Bundtrin"],"childoptions":["Dørhåndtag"],"parentvalue":["Hårdttræ bundtrin"],"childvalue":["Håndtag for skydedør"]}},"height":{"50":{"parentoptions":["Sprosser","Sprosser","Sprosser"],"childoptions":["Udluftningsventil_40mm energisprosser","Not_55mm energisprosser","Not_55mm energisprosser"],"parentvalue":["40mm energisprosser_all","55mm energisprosser_Not sider og top","55mm energisprosser_Ingen not"],"childvalue":["all_40mm energisprosser","Not sider og top_55mm energisprosser","Ingen not_55mm energisprosser"]}}}';

function selectSpec(ele) {

   var inputvalue = ele.value;
    var selectname = ele.name;
    var mainName = selectname.replace("specification_", "");
    param = "spectfication_" + mainName + "=" + inputvalue; //+"&color_type=1";
    var selectedvalue = jQuery.trim(jQuery('option:selected',ele).text());
    var selectedoption = jQuery.trim(jQuery('#' + selectname + '-accordion label').contents().get(0).nodeValue);
    restrictSpecification(selectedoption,selectedvalue);
}


function restrictSpecification(selectedoption,selectedvalue) {


    if (typeof dependentspecArray !== 'undefined') {
        var height = 50;
        jQuery.each(JSON.parse(dependentspecArray), function(firstkey, firstval) {

            if (firstkey == 'height') {

                jQuery.each(firstval, function(secondkey, secondval) {


                    if (height <= secondkey) {
                    var $i = 0;
                                if (selectedoption == secondval.parentoptions[$i]) {
                                 jQuery('.a-layout').each(function() {
                                //console.log(jQuery(this).parent('select').attr('id'));
                                      var selectIdInner = jQuery(this).parent('select').attr('id');

                        var loopoption = jQuery.trim(jQuery('#' + selectIdInner + '-accordion label').contents().get(0).nodeValue);

                                    var loopoptionvalue = jQuery.trim(jQuery(this).text());
                                    if(jQuery.inArray(selectedoption, secondval.parentoptions) != -1 && jQuery.inArray(selectedvalue+'_'+loopoptionvalue, secondval.parentvalue) != -1 && jQuery.inArray(loopoptionvalue+'_'+selectedvalue,secondval.childvalue != -1)) {
                                        jQuery(this).hide();


                                    }
                                     else {
                                        jQuery(this).show();


                                    }

                                   if(jQuery.inArray(selectedoption, secondval.parentoptions) != -1 && jQuery.inArray(selectedvalue+'_all', secondval.parentvalue) != -1 && jQuery.inArray('all_'+selectedvalue,secondval.childvalue) != -1 && jQuery.inArray(loopoption+'_'+selectedvalue, secondval.childoptions) !=-1)
{
                                            jQuery('#' + selectIdInner + '-accordion-content').prev('h3').hide();
                                            jQuery(this).parent('select').hide();


                                        }else{
                                            jQuery('#' + selectIdInner + '-accordion-content').prev('h3').show();
                                            jQuery(this).parent('select').show();
                                        }
                                });
                            }


                    }
                    $i++;
                });
            }
        });
    }
}