jQuery帮助：基于多个下拉选项显示/隐藏“添加到购物车” div

问题描述 投票：0回答：1

我有一个产品，该产品具有多个下拉选项，并且每种组合都具有唯一的“添加到购物车” 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>
jquery dropdown show-hide
1个回答
0
投票

通过添加到每个div </div>来关闭div标签>

<div style='display:none;' id='W2'>ADD TO CART1</div><br/>
....

并将style='display:none;'添加到输入中
<input style='display:none;' type='text' class='text' name='business' value size='20' />

最后根据选择隐藏或显示具有相应div的输入
$(document).ready(function(){
    $('#SELECTWOOD').on('change', function() {

          if ( this.value == 'MAPLE'){ 
            console.log('show')
            $("#W8").show();
            $("input").show();
          }
          else{ 
            $("#W8").hide();
            $("input").hide();
          }
        });
    });

希望对您有帮助
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.