[英]jQuery: Show div depending on dropdown selection
這是我的代碼：
<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東西？
將所有盒子放在另一個DIV中。
<div id="boxes">
<div class="debit box">debit</div>
<div class="transfer box">transfer</div>
</div>
然后，您可以執行以下操作：
$("#boxes > div").hide();
$(".debit").show();
如果您要借記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提出的建議，因為您需要為要添加的任何選擇元素手動更新隱藏和顯示。 但是對於兩個要素，這可能沒問題。
這可能適合您：
<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>
使用純JavaScript根據下拉選擇顯示/隱藏div-無jquery
[英]Show/ hide div depending on dropdown selection using pure javascript - no jquery
如何根據jQuery中Bootstrap下拉菜單的選擇顯示和隱藏div元素
[英]How to show and hide div elements based on the selection of bootstrap dropdown in jQuery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.