Javascript 显示隐藏选择框和基于选择的选择框选项

我有一个JSON数组来隐藏特定选项，并根据选择来选择框。父选项和值用于选择，子选项和值应隐藏在该选择上。它没有按预期工作。下面是当40mm energisprosserselect从Sprosser中隐藏Udluftningsventiland Udluftningsventil时当前发生的情况选择框，它也会隐藏不选择框的值，即Ingen Not和Not sider og top

实际上，它应该只在该选择上隐藏Udluftningsventil Udluftningsventil select框not.Ingen not和not sider og top

当选择55mm energisprosser时，它应仅隐藏Ingen not和not sider og top

var dependentspectarray={width:{50:{parentoptions:[Bundtrin]，childoptions:[Dørhåndtag]，parentvalue:[HårdttræBundtrin]，childvalue:[Håndtag for skydedør]}，高度：{50:{parentoptions:[Sprosser，Sprosser，Sprosser]，childoptions:[Udluftningsventil，Not，Not]，parentvalue:[40mm energisprosser，55mm energisprosser]，childvalue:[全部，而不是侧边og top，Ingen不]}}}； 函数selectSpecele{ var输入值=元件值； var selectname=ele.name； var mainName=selectname.replacespecification_u2;； 参数=spectification\u+mainName+=+inputvalue；//+&color\u type=1； var selectedvalue=jQuery.trimjQuery'option:selected'，ele.text； var selectedoption=jQuery.trimjQuery+selectname+'-accordion label'.contents.get0.nodeValue； 限制规格SelectedOption，selectedvalue； } 功能限制规格SelectedOption，selectedvalue{ 如果dependentspecArray的类型！=“未定义”{ var高度=50； jQuery.eachJSON.parsedependentspecArray，functionfirstkey，firstval{ 如果firstkey==“高度”{ jQuery.eachfirstval，functionsecondkey，secondval{ 如果高度这里是答案

HTML代码

json代码如下，需要稍微修改一下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++;
                });
            }
        });
    }
}

---

你不能在浏览器中隐藏标签。它在某些情况下不受支持，例如IE选项为“删除/替换”或“禁用/启用”不必担心，我正在基于此生成div，因此我将对其进行管理

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