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

javascript jquery html html-select

48,913

Solution 1

Is onchange what you're looking for?

Solution 2

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>

Solution 3

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

48,913

Author by

Julius A

Sitecore MVP. Senior Software developer/architect and consultant .NET . ASP.NET . ASP.NET Core . Sitecore . Windows . Windows Azure . SQL Server. Big Data. IoT Blog: https://360agileweb.wordpress.com

Updated on July 03, 2020

Comments

Julius A almost 4 years

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

Worth noting that when you're using a <select>, the event is fired immediately on selection, whereas with something like a text input, it's not fired until you move off the field. Checkboxes and radio buttons are fiddly with onchange, so it's best to use onclick for those.
Jeremy Visser over 14 years

The world is not jQuery. Probably best to respond with a generic JS response if the O.P. didn't explicitly ask for jQuery.