Have you ever needed to change a css class with a dropdown? No I haven’t either until today when it came in useful so Im making a note of it.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(document).ready(function(){ $( "#wlt_txn_type" ).change(function() { if($("#wlt_txn_type option:selected").val() == "Income"){ $("#tab-first").removeClass("has-error"); $("#tab-first").addClass("has-success"); } if($("#wlt_txn_type option:selected").val() == "Expense"){ $("#tab-first").removeClass("has-success"); $("#tab-first").addClass("has-error"); } }); }); |
|
1 2 3 4 5 6 |
.has-success { background-color: green; } .has-error { background-color: red; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="tab-pane active" id="tab-first"> <div class="form-group"> <label class="col-md-2 col-xs-12 control-label">Transaction Type</label> <div class="col-md-3 col-xs-12"> <select id="wlt_txn_type" name="wlt_txn_type" class="form-control" required> <option value="" disabled selected>Choose option</option> <option value="Income">Income</option> <option value="Expense">Expense</option> </select> <span class="help-block">Required</span> </div> <label class="col-md-2 col-xs-12 control-label">Transaction Date</label> <div class="col-md-3 col-xs-12"> <input id="wlt_txn_date" Name="wlt_txn_date" type="date" class="form-control" required/> <span class="help-block">Required,No Future Date Allowed</span> </div> </div> <div class="form-group"> <label class="col-md-2 col-xs-12 control-label">Select Wallet</label> <div class="col-md-3 col-xs-12"> <select id="wlt_pcat" name="wlt_pcat" class="form-control" required> <option value="" disabled selected>Choose Wallet</option> </select> <span class="help-block">Required</span> </div> <label class="col-md-2 col-xs-12 control-label">OD Limit</label> <div class="col-md-3 col-xs-12"> <input value="" class="form-control" readonly /> </div> </div> </div> |