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

时间：2017-12-15 13:45:11

标签： javascript jquery arrays json

我有一个JSON数组来隐藏特定选项并根据selection.searent选项和值进行选择。选项和子选项和值应隐藏在该选择上。它没有按预期工作。这是当前的内容当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

上找到

1 个答案:

答案 0 :(得分：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++;
                });
            }
        });
    }
}
相关问题
最新问题