Javascript 根据html页面中的选定值添加或更改CSS类_Javascript_Jquery_Html_Css

Javascript 根据html页面中的选定值添加或更改CSS类

javascript jquery html css

Javascript 根据html页面中的选定值添加或更改CSS类,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有下面的hmtl页面，是否可以根据事务类型的选择在第3行添加一个类。如果我从选择选项中选择交易类型费用，我需要在下面html div class=tab窗格的第3行添加一个类has error；如果我从选择选项中选择收入，我需要将类替换为has success <html> <body> <div class="tab-pane active" id="tab-first"> <div class="

我有下面的hmtl页面，是否可以根据事务类型的选择在第3行添加一个类。如果我从选择选项中选择交易类型费用，我需要在下面html div class=tab窗格的第3行添加一个类has error；如果我从选择选项中选择收入，我需要将类替换为has success

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

提前感谢

这是绝对可能的；将更改事件添加到选择中，然后根据添加或删除类检查该选择框的val：

$document.readyfunction{ var tempvar=； $wlt\u txn\u type.onchange，函数{ tempvar=$wlt\u txn\u type.val；如果tempvar==收入{ $tab first.addClass'has-success'。removeClass'has-error'； }否则如果tempvar==费用{ $tab first.addClass'has-error'。removeClass'has-success'； } } } 交易类型选择选项收入费用要求的交易日期必需，不允许将来的日期选择钱包选择钱包要求的 OD限值

这可以使用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.readyfunction{ $wlt\U txn\U类型。更改函数{ 如果$wlt\U txn\U类型选项：selected.val==收入{ $tab-first.removeClasshas-error； $tab-first.addClasshas-success； } 如果$wlt\U txn\U类型选项：selected.val==费用{ $tab-first.removeClasshas-success； $tab-first.addClasshas-error； } }; }; .成功了{ 背景颜色：绿色； } .有错误{ 背景色：红色； } 交易类型选择选项收入费用要求的交易日期必需，不允许将来的日期选择钱包选择钱包要求的 OD限值如果您正在使用twitter引导，则需要将has success或has error类添加到表单组类中

要实现这一点，需要使用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');
        }
    });

});