Anup Gupta Anup Gupta - 2 months ago 7
jQuery Question

Javascript/Jquery change class of Select after selecting option

So I have a Select Box whose color is Grey but after selecting an option the color of the box should turn black. I am Using the following code to accomplish this event



$('.change_color').on("change",function() {
$(this).removeClass('grey_color');
$(this).addClass('black_color');
});

.grey_color{
color: #999;
}
.black_color{
color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div>
<select class="change_color grey_color">
<option>12th Standard</option>
<option>High School</option>
<option>First Year</option>
</select>
</div>





I Can't seem to figure out my error.

L J L J
Answer

Seems to be working as per your requirement.

Here is the link to code: http://codepen.io/anon/pen/rrjGEO

Markup:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Select Box</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"
            integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
            crossorigin="anonymous"></script>

    <style>
        .grey_color {
            color: #999;
        }

        .black_color {
            color: #000;
        }
    </style>

    <script>
        $(document).ready(function () {
            $('.change_color').on("change", function () {
                $(this).removeClass('grey_color');
                $(this).addClass('black_color');
            });
        });

    </script>
</head>
<body>
    <div>
        <select class="change_color grey_color">
            <option>12th Standard</option>
            <option>High School</option>
            <option>First Year</option>
        </select>
    </div>
</body>
</html>
Comments