David David - 1 month ago 14
CSS Question

jQuery: Show div depending on dropdown selection

This is my code:

<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>


That works very good. But I don't want to call my class
debit box
. I want to call it
debit
instead.

That means
<div class="debit">debit</div>
instead of
<div class="debit box">debit</div>
.

How can I get rid of this
box
thing?

Answer

Put all the boxes inside another DIV.

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

Then you can do:

$("#boxes > div").hide();
$(".debit").show();