CODEWITHSUNDEEP
jqueryhtmlselect
user1345883
user1345883

Reputation: 451

jquery change doesn't work on select

Why doesn't this work? I'm not sure what I'm doing wrong. I'm certain that jquery is working on the page.

Can anyone help me? Thanks in advance

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles/derweco.css"/>
    <script type="text/javascript" src="scripts/jquery-2.1.0.js"></script>
    <script type="text/javascript">

        $('#numbers').change(function(){
            alert('other value');
        });
    </script>
</head>
<body>
<div id="home">
    <select id="numbers">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</div>
</body>
</html>

Upvotes: 5

Views: 9037

Answers (4)

Angel U Mendoza
Angel U Mendoza

Reputation: 1

This work for me

$(function() {
   $('#numbers').change(function(){
       console.log('other value');
   });
});

Upvotes: 0

Felix
Felix

Reputation: 38112

You need to wrap your code inside DOM ready handler $(document).ready(function() {...}); or shorter form $(function() {...}); to make sure all of your DOM elements have been loaded properly before executing your jQuery code.

$(function() {
    $('#numbers').change(function(){
        alert('other value');
    });
});

Fiddle Demo

Upvotes: 7

stackunderflow
stackunderflow

Reputation: 3883

when you want to register an event like onchange you should put it inside the 

    $(documet).ready(function(){
$('#numbers').change(function(){
        alert('other value');
    });
});

notice that $(documet).ready() is equal to $() as Felix pointed out !

Also notice that you can apply event registration using plain Javascript as follow:

window.onload=function(){};

Upvotes: 3

underscore
underscore

Reputation: 6887

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles/derweco.css"/>
    <script type="text/javascript" src="scripts/jquery-2.1.0.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){ //Added DOM ready 
        $('#numbers').change(function(){
            alert('other value');
        });
     });
    </script>
</head>
<body>
<div id="home">
    <select id="numbers">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</div>
</body>
</html>

Upvotes: 2

Related Questions