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

Question

I have the following hmtl page, is it possible to add a class on the div(line 3) based on the selection of the "Transaction Type". 我有以下hmtl页面，是否可以根据“交易类型”的选择在div（第3行）上添加一个类。 I Need to add a class "has-error" on line 3 of the below html ("div class="tab-pane active has-error" id="tab-first") if i am selecting transaction type "Expense" from the select option and I need to replace class to "has-success" if i am selecting "Income" from the select option. 如果我要从中选择交易类型“费用”，则需要在下面的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>

Thanks in Advance 提前致谢

Answer 1

It is Absolutely possible; 绝对有可能； Add a change event to the select and then check what the val() is of that select box, based on that add or remove class: 将更改事件添加到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>

Answer 2

This can be done using jQuery like so: 可以使用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');
  }
});

Answer 3

Very easily done with jQuery: 使用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>

Answer 4

If you are using twitter-bootstrap you need to add the has-success or has-error class to the form-group class. 如果使用的是twitter-bootstrap ，则需要将 has-success或has-error类添加到form-group类。

To implement that, you need to use jquery . 为此，您需要使用jquery 。

JS: 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');
        }
    });

});

Here's the JsFiddle link . 这是JsFiddle链接。

Hope it helps. 希望能帮助到你。

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

问题描述

4 个解决方案

解决方案1
2 已采纳 2015-06-29 02:38:46

解决方案2
0 2015-06-29 02:43:56

解决方案3
0 2015-06-29 02:46:09

解决方案4
0 2015-06-29 02:51:26

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

问题描述

4 个解决方案

解决方案1 2 已采纳 2015-06-29 02:38:46

解决方案2 0 2015-06-29 02:43:56

解决方案3 0 2015-06-29 02:46:09

解决方案4 0 2015-06-29 02:51:26

解决方案1
2 已采纳 2015-06-29 02:38:46

解决方案2
0 2015-06-29 02:43:56

解决方案3
0 2015-06-29 02:46:09

解决方案4
0 2015-06-29 02:51:26