javascript - 根据选择标签选择显示多个div

Question

我想要实现的是，如果用户在 select 标记中选择一个数字，那么许多表单应该显示在 select 标记下方。我正在使用 Jquery 来实现这一点。但它不起作用:

选择标签:-

<label>How many credit cards do you have:*
    <select name="debts_cards" id="debts_cards" required>
        <option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option>
    </select>
</label>

包含相同类型表单的 10 个 div:-

<div id="debts_cards_extra">
    <h2>Credit Card 1</h2>
    <label>
        Provider:
        <input type="text" name="debts_cards_extra_provider">
    </label>
    <label>
        Credit Card Limit:
        <input type="number" name="debts_cards_extra_limit">
    </label>
    <label>
        How much do you have owing:
        <input type="number" name="debts_cards_extra_owing">
    </label>
</div>
<div id="debts_cards_extra2">
    <h2>Credit Card 2</h2>
    <label>
        Provider:
        <input type="text" name="debts_cards_extra2_provider">
    </label>
    <label>
        Credit Card Limit:
        <input type="number" name="debts_cards_extra2_limit">
    </label>
    <label>
        How much do you have owing:
        <input type="number" name="debts_cards_extra2_owing">
    </label>
</div>
<div id="debts_cards_extra3">
    <h2>Credit Card 3</h2>
    <label>
        Provider:
        <input type="text" name="debts_cards_extra3_provider">
    </label>
    <label>
        Credit Card Limit:
        <input type="number" name="debts_cards_extra3_limit">
    </label>
    <label>
        How much do you have owing:
        <input type="number" name="debts_cards_extra3_owing">
    </label>
</div>
<!-- and so on..... -->

Jquery:-

$(document).ready(function(){
  $('#debts_cards').on('change', function() {
  if ( this.value == '0' )
  //.....................^.......
  {
    $("#debts_cards_extra").hide();
  }
  elseif ( this.value == '1' )
  {
    $("#debts_cards_extra").show();
  }
  elseif ( this.value == '2' )
  {
    $("#debts_cards_extra").show();
    $("#debts_cards_extra2").show();
  }
  elseif ( this.value == '3' )
  {
    $("#debts_cards_extra").show();
    $("#debts_cards_extra2").show();
    $("#debts_cards_extra3").show();
  }
  elseif ( this.value == '4' )
  {
    $("#debts_cards_extra").show();
    $("#debts_cards_extra2").show();
    $("#debts_cards_extra3").show();
    $("#debts_cards_extra4").show();
  }
// and so on.....
});
});

为什么不工作？在这里你可以看到它live 。请注意，我正在使用 WordPress。感谢任何正确方向的帮助。

Answer 1

在现场演示中，首次加载页面时会显示所有 10 个 div。

因此 $("#debts_cards_extra").show(); 不会产生任何影响，因为 div 一开始就已经可见。

对于每个 div，您都可以执行 style = "display:none;":

<div id="debts_cards_extra" style = "display:none;">
    <h2>Credit Card 1</h2>
    <label>
        Provider:
        <input type="text" name="debts_cards_extra_provider">
    </label>
    <label>
        Credit Card Limit:
        <input type="number" name="debts_cards_extra_limit">
    </label>
    <label>
        How much do you have owing:
        <input type="number" name="debts_cards_extra_owing">
    </label>
</div>

编辑::我将 This 中的 elseif 更改为 if fiddle 。它起作用了。