Question

这是我的代码：

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
  $('select[name=payment]').change(function() {
    var value = $(this).val();
    if (value == "debit") {
      $(".box").not(".debit").hide();
      $(".debit").show();
    } else if (value == "transfer") {
      $(".box").not(".transfer").hide();
      $(".transfer").show();
    }
  });
});
</script>
</head>
<body>

<select name="payment">
    <option data-calc="0" value="" disabled selected>Chose payment ↓</option>
    <option value="transfer">transfer</option>
    <option value="debit">debit</option>
</select>

<div class="debit box">debit</div>
<div class="transfer box">transfer</div>

</body>
</html>

这非常好。但我不想打电话给我的班级debit box。我想改为称呼debit。

这意味着<div class="debit">debit</div>而不是<div class="debit box">debit</div>。

如何摆脱这个box的事情？

Answer 1

将所有方框放入另一个DIV。

CREATE TABLE

然后你可以这样做：

INSERT

Answer 2

如果你想让className为借方，并在jquery hide方法中用这个类名识别它，那么方法应如下所示：

<script>
$(document).ready(function() {
  $('select[name=payment]').change(function() {
    var value = $(this).val();
    if (value == "debit") {
      $(".transfer").hide();
      $(".debit").show();
    } else if (value == "transfer") {
      $(".debit").hide();
      $(".transfer").show();
    }
  });
});
</script>

但我认为它突出了你想要Barmar建议的东西，因为你需要更新隐藏并手动显示你要添加的任何选择元素。但对于两个元素，这可能没问题。

Answer 3

这可能适合您：

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
  $('select[name=payment]').change(function() {
    var value = $(this).val();
    $(".boxes div").hide();
    $("." + $value).show();
  });
});
</script>
</head>
<body>

<select name="payment">
    <option data-calc="0" value="" disabled selected>Chose payment ↓</option>
    <option value="transfer">transfer</option>
    <option value="debit">debit</option>
</select>
<div class="boxes">
    <div class="debit">debit</div>
    <div class="transfer">transfer</div>
</div>

</body>
</html>

jQuery：根据下拉选择显示div

3 个答案: