How Can I Use Change Method In JQuery With Example

admin_img Posted By Bajarangi soft , Posted On 16-10-2020

In jQuery change event occurs when the value of an element is changed. Generall it is used in HTML select box. It is an inbuilt function of jquery.So today we discuss how to use change method in jquery

How Can I Use Change Method In JQuery With Example

Step 1:Create index.html file and implement below code.
 

<select class="form-control">
    <option value="">Select</option>
    <option value="Flowers">Flowers</option>
    <option value="Animals">Animals</option>
    <option value="Birds">Birds</option>
</select>
<h2>You Select: <span id="message"></span></h2>

Step 2:Implement jQuery to change() methods.
 
<script>
    count = 0;
    $(document).ready(function(){
        $("select").change(function(){
            var data=$("select option:selected").val();
            if(data!=""){
                $("#message").text(data);
            }
            else{
                $("#message").text("Nothing");
            }
        });
    });
</script>

 Complete Code For Using Change() Method In JQuery 
<!DOCTYPE html>
<html>
<head>
    <title>How Can I Use Change Method In JQuery With Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
    body {
        background: black;
    }
</style>
<body>
<div class="container">
    <br><br><br><br>
    <div class="text-center">
        <h1 id="color" style="color: White;">Use Change Method In JQuery </h1>
    </div>
    <br>

    <div class="well">
        <select class="form-control">
            <option value="">Select</option>
            <option value="Flowers">Flowers</option>
            <option value="Animals">Animals</option>
            <option value="Birds">Birds</option>
        </select>
        <h2>You Select: <span id="message"></span></h2>
    </div>

</div>
</body>
</html>
<script>
    count = 0;
    $(document).ready(function(){
        $("select").change(function(){
            var data=$("select option:selected").val();
            if(data!=""){
                $("#message").text(data);
            }
            else{
                $("#message").text("Nothing");
            }
        });
    });
</script>

Related Post