我有一个产品,该产品具有多个下拉选项,并且每种组合均具有唯一的“添加到购物车” div。我想根据两个下拉菜单之间的选择来显示正确的“添加到购物车” div。
这是示例html ...,在一些show / hide jQuery上效果不佳。我真是个菜鸟。预先感谢。
$(document).ready(function(){
$('#SELECTWOOD').on('change',function() {
if ( this.value == 'MAPLE')
{
$("#W8").show();
}
else
{
$("#W8").hide();
}
});
});
<body>
<select id='SELECTWOOD'>
<option value="WALNUT">SOLID WALNUT</option>
<option value="MAPLE">SOLID MAPLE</option>
</select>
<select id='SELECTSIZE'>
<option value="2">2 SEATER (30")</option>
<option value="4">4-6 SEATER (60")</option>
<option value="6">6 SEATER (76")</option>
<option value="8">8 SEATER (84")</option>
</select>
<div style='display:none;' id='W2'>ADD TO CART1<br/>
<div style='display:none;' id='W46'>ADD TO CART2<br/>
<div style='display:none;' id='W6'>ADD TO CART3<br/>
<div style='display:none;' id='W8'>ADD TO CART4<br/>
<div style='display:none;' id='M2'>ADD TO CART5<br/>
<div style='display:none;' id='M46'>ADD TO CART6<br/>
<div style='display:none;' id='M6'>ADD TO CART7<br/>
<div style='display:none;' id='M8'>ADD TO CART8<br/>
<br/>
<input type='text' class='text' name='business' value size='20' />
<br/>
</div>
</body>