CODEWITHSUNDEEP
jquery
SupaOden
SupaOden

Reputation: 742

select change event

JS

$(document).ready(function () {

$('#issue_no').change(function()
{
   alert('Value change to ' + $(this).attr('value'));
});

});

HTML

<select id='issue_no' name='issue_non'>
    <option value='_empty' selected='selected' style='display:none;'></option>
    <option value="ABC">Vol 1, No 1 (2012): Journal of JISRComputing</option>
</select>

Doesnt seem to work. Why? why is alert not being displayed when changing the select value.

Upvotes: 1

Views: 2777

Answers (5)

Sampson
Sampson

Reputation: 268442

Make sure you're referencing jQuery:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>

Wrap your code in a ready function:

$(function(){
  /* Code Here */
});

Be sure to check your id's and markup for correct structure:

<select id='issue_no' name='issue_non'>
    <option value='_empty' selected='selected' style='display:none;'></option>
    <option value="ABC">Vol 1, No 1 (2012): Journal of JISRComputing</option>
</select>

Write well-formatted JavaScript for ease of readability:

$(function(){
    $("#issue_no").on("change", function(){
        alert( this.value );
    });
});

After all of this, it works: http://jsbin.com/obadub/edit#javascript,html

As always, make sure you don't have problems elsewhere on your page.

<!DOCTYPE html>
<html>
  <head>
    <title>Alert Selected Value</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
    <script>
    $(function(){
      $("#issue_no").on("change", function(){
        alert( this.value );
      });
    });
    </script>
  </head>
  <body>
    <select id='issue_no' name='issue_non'>
      <option value='_empty' selected='selected' style='display:none;'></option>
      <option value="ABC">Vol 1, No 1 (2012): Journal of JISRComputing</option>
    </select>
  </body>
</html>

Upvotes: 3

Thulasiram
Thulasiram

Reputation: 8552

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#issue_no').on('change', function () {
                alert('Value change to ' + $(this).attr('value'));
            });
        });
    </script>
</head>
<body>
    <select id='issue_no' name='issue_non'>
        <option value='_empty' selected='selected' style='display: none;'></option>
        <option value="ABC">Vol 1, No 1 (2012): Journal of JISRComputing</option>
    </select>
</body>
</html>

Upvotes: 0

Snake Eyes
Snake Eyes

Reputation: 16764

you can use like

$(function() {
   $('#issue_no').on("change", function()
   {
      alert('Value change to ' + $(this).val());
   });
});

Upvotes: 0

Anthony Grist
Anthony Grist

Reputation: 38345

You either need to use $(document).ready(function() {...}); (or its shorthand form $(function() {...});), or simply move that script to the bottom of the page, right before the closing body tag (</body>).

Also, there are a whole number of better alternatives for getting the value out, rather than using .attr('value') (which I'm not convinced is even going to work as you want). Calling the .val() jQuery function ($(this).val()) or simply accessing the property directly, using this.value.

Upvotes: 0

karim79
karim79

Reputation: 342745

It works. Your problem probably lies elsewhere.

Upvotes: 1

Related Questions