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

【问题标题】：Jquery help: Show/Hide "add to cart" div based on multiple dropdown selectionsJquery 帮助：基于多个下拉选择显示/隐藏“添加到购物车”div
【发布时间】：2019-12-03 19:18:06
【问题描述】：

我的产品具有多个下拉选项，并且每个可能的组合都有一个独特的“添加到购物车”div。我想根据两个下拉菜单之间的选择显示正确的“添加到购物车”div。

这里是示例 html...以及一些显示/隐藏 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】：

通过添加到每个 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();
          }
        });
    });

希望对你有帮助

【讨论】：

感谢您的回复！如果 SELECTWOOD 和 SELECTSIZE 都在玩，那么选择一个 div 的脚本是什么？在我当前的代码中，我只有 SELECTWOOD。不知道如何在操作中添加SELECTSIZE