javascript - 需要帮助调整具有三个选项的下拉列表，用户选择一个 - 一个隐藏的 div 显示正确的字段

Question

我在这里发布了一个问题并在几分钟内得到了答复我希望这里的向导能再次帮助我。

好吧，我正在使用我在网上找到的脚本来尝试将此功能添加到购物车表单。

这是设置。

我有一个付款方式下拉菜单，其中有 Visa、Mastercard 和银行提款作为选项。

对于信用卡，我有一个带有特定字段集的隐藏 div，对于银行，我有另一个隐藏的 div。每个 div 都有命名 ID - #payCredit 和 #payBank

两者的 css 都有 margin: 0px 和 display: none;

这是我在送货地址复选框上成功使用的一段 javascript

`function toggleLayer( whichLayer )
{
  var elem, vis;
  if( document.getElementById ) // this is the way the standards work
    elem = document.getElementById( whichLayer );
  else if( document.all ) // this is the way old msie versions work
      elem = document.all[whichLayer];
  else if( document.layers ) // this is the way nn4 works
    elem = document.layers[whichLayer];
  vis = elem.style;
  // if the style.display value is blank we try to figure it out here
  if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
    vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
  vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}`

我希望我可以稍微改变它以满足我的需要。

这是下拉列表

<label>Payment Method:</label>
    <select name="payment" id="payment" class="dropdown3" style="width:8em">
              <option selected="selected">Select</option>
       <option value="Visa" onclick="javascript:toggleLayer('payCredit');">Visa</option>
       <option value="MasterCard" onclick="javascript:toggleLayer('payCredit');">Mastercard</option>
       <option value="Direct" onclick="javascript:toggleLayer('payBank');">Direct Withdraw</option>
    </select></li>

目前的结果是它有点管用。

我可以打开下拉菜单并选择 Visa，它会出现，如果我再次选择 Visa，它就会消失，如果我选择 Visa，然后选择银行，两者都会出现。

Answer 1

当您切换 Visa 或 Mastercard 时，它们都会切换 payCredit，因此它们会相互切换开/关。但是，当您切换 payBank 时，它不会关闭 payCredit。

您可以通过清除 payBank 和 payCredit 来启动您的 toggleLayer(whichLayer)，无论选择了哪一个并将两者都设置为不显示，然后继续确定选择了哪个并将该显示设置为阻止。