【发布时间】：2017-12-15 13:45:10
【问题描述】：
我有一个 JSON 数组来隐藏特定选项和基于选择的选择框。父选项和值用于选择，子选项和值应该隐藏在该选择上。它没有按预期工作。这里是当前当40mm energisprosserselect from 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 @ / p>
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获得
【问题讨论】：
-
你不能跨浏览器隐藏
<option>标签。 IE 选项不支持删除/替换或禁用/启用 -
不用担心，我会根据这个生成 div，所以我会管理它
标签： javascript jquery arrays json