HTML <select> what is the name of on select event?

Question!

Does the HTML "select" element have an on select event? what exactly is the name of the event?

By : Julius A


Answers

It's onchange Event.

jQuery wraps it in the .change helper. If using plain Javascript then use addEventListner('change', function...):

<html>
<head>
    <script type="text/javascript" src="jquery-1.2.6.js"></script>
    <script type="text/javascript">

// If using jQuery
$(document).ready( function() {
    $("#list").attr( "selectedIndex", -1 );
    $("#list").change( function() {
        $("#answer").text( $("#list option:selected").val() );
    });
});
    </script>

    <script type="text/javascript">

// Plain Javascript:
document.addEventListener('DOMContentLoaded', function(event) {
    var selectList = document.getElementById("list");
    var divAnswer  = document.getElementById("answer");
    selectList.addEventListener("change", function(changeEvent) {
        divAnswer.textContent = selectList.value;
    });
});
    </script>

</head>
<body>
    <div id="answer">No answer</div>
    <form>
        Answer
        <select id="list">
            <option value="Answer A">A</option>
            <option value="Answer B">B</option>
            <option value="Answer C">C</option>
        </select>
    </form>
</body>
</html>


Regardless of input type, whenever a form input changes value, an onchange event should always be thrown. (With the exception of buttons, as they are not really input devices as such.)



This video can help you solving your question :)
By: admin