Skip to content
Advertisements

JavaScript onchange() Example

JavaScript

javascript
<body>

    
    <div class="container">
        <select id="list" class="form-control">
            <option value= "Audi" > Audi </option>
            <option value= "BMW" > BMW </option>
            <option value= "Mercedes" > Mercedes </option>
            <option value= "Volvo" > Volvo </option>
        </select>
        <button class="btn btn-dark"> CLICK </button>
        <div class="box"></div>
    </div>

<script>
 

    let list = document.getElementById("list");
    list.addEventListener("change",function(){
        let box = document.querySelector(".box");
        box.innerHTML = list.value;
    })



</script>


</body>

JQuery

JQuery
<body>

    
    <div class="container">
        <select id="list" class="form-control">
            <option value="Audi">Audi</option>
            <option value="BMW">BMW</option>
            <option value="Mercedes">Mercedes</option>
            <option value="Volvo">Volvo</option>
        </select>
        <button class="btn btn-dark">CLICK</button>
        <div class="box"></div>
    </div>

<script>

    $(document).ready(function(){
            $("#list").change(function(){
                list = $("#list").val();
                $(".box").text(list);
            })    
        })

</script>

</body>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: