선택 숨기기 선택 상자 및 선택 상자 옵션 선택에 따라 표시

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