[英]Add or change CSS class based on a selected value in html page
我有以下hmtl頁面,是否可以根據“交易類型”的選擇在div(第3行)上添加一個類。 如果我要從中選擇交易類型“費用”,則需要在下面的html的第3行添加一個類“具有錯誤” (“ div class =“ tab-pane active has-error” id =“ tab-first”)選擇選項,如果我要從選擇選項中選擇“收入”,則需要將類替換為“具有成功”。
<html>
<body>
<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>
</body>
</html>
提前致謝
絕對有可能; 將更改事件添加到select
,然后根據該添加或刪除類檢查該選擇框的val()
是什么:
$(document).ready(function() { var tempvar = ""; $("#wlt_txn_type").on("change", function() { tempvar = $("#wlt_txn_type").val(); if (tempvar == "Income") { $("#tab-first").addClass('has-success').removeClass('has-error'); } else if (tempvar == "Expense") { $("#tab-first").addClass('has-error').removeClass('has-success'); } }) })
<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>
可以使用jQuery這樣來完成:
// When the value changes
$("#wlt_txn_type").change(function () {
// Get the value
transactionType = $("#wlt_txn_type").val();
// Add classes according to that value
if (transactionType == "Expense") {
$("#tab-first").addClass('has-success').removeClass('has-error');
} else if (transactionType == "Income") {
$("#tab-first").removeClass('has-success').addClass('has-error');
}
});
使用jQuery非常容易完成:
$(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"); } }); });
.has-success { background-color: green; } .has-error { background-color: red; }
<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>
如果使用的是twitter-bootstrap ,則需要將 has-success
或has-error
類添加到form-group
類。
為此,您需要使用jquery 。
JS:
$(function() {
$('#wlt_txn_type').on('change', function() {
if ($(this).val() == 'Expense') {
$('#tab-first .form-group').addClass('has-error');
$('#tab-first .form-group').removeClass('has-success');
} else {
$('#tab-first .form-group').addClass('has-success');
$('#tab-first .form-group').removeClass('has-error');
}
});
});
這是JsFiddle鏈接 。
希望能幫助到你。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.