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

Viewed 49536

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

4 Answers

It's also worth mentioning that this doesn't fire if the selection doesn't change (seems self explanatory). As far as I know there is no event that fires when a user drops down the selectbox and then reselects the original value.

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.)

Related