選択非表示の選択ボックスと選択ボックスオプションを選択に基づいて選択します。

Question

特定のオプションを非表示にしてselection.Parentオプションと値に基づいて選択ボックスを非表示にするJSON配列があります。 40mm energisprosserがSprosserから選択されたときに現在起こっていることはここにありますUdluftningsventilとUdluftningsventilの選択ボックスを隠しており、Notセレクトボックスからの値も表示されません。つまり、Ingen notとNot sider og topです。

実際には、その選択肢でのみUdluftningsventilとUdluftningsventilの選択ボックスを非表示にする必要があります。 Ingen notおよびNot sider og top

55mm energisprosserを選択すると、Ingen notおよび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++; 
       }); 
      } 
     }); 
    } 
}