Jquery select change

Question

<select id="Nazione" name="Nazione">
    <option prefix='+93' value='AF' >Afghanistan </option>
    <option prefix='+355' value='AL' >Albania </option>
    <option prefix='+213' value='DZ' >Algeria </option>
    <option prefix='+376' value='AD' >Andorra .... etc
</select>

and this js

$(document).ready(function() {  
    $('#Nazione').change(function(){

        alert( $(this).find("option:selected").attr('prefix') );
        alert( $(this).attr('prefix') );
    });
  });

I have alert NULL... WHy?

You have not closed the option tag for the last entry.Is that a typo or mistake in the code? — Ammu, May 11 '11 at 09:27
I believe it is the second `alert` that is causing the issues. — James Wiseman, May 11 '11 at 09:27
This works for me _if I ask jsfiddle for jQuery 1.6_. Both alerts give null on jQuery 1.5.2. — Chowlett, May 11 '11 at 09:31

score 10 · Accepted Answer · answered May 11 '11 at 09:27

10

Your code is fine. Here's a demo : http://jsfiddle.net/hKktc/1/

The reason you're not getting a value for the second alert call is because the attribute prefix doesn't exist for the select and only exists for the option

answered May 11 '11 at 09:27

JohnP

49,507
13
108
140

1

That's a really weird issue. The problem is not with the code, rather with the attribute name. If you change it to `prefix1` it works : http://jsfiddle.net/hKktc/7/ I don't know whether it's a bug or something else – JohnP May 11 '11 at 09:53
`prefix` might be a keyword! :) – Praveen Kumar Purushothaman Oct 27 '12 at 11:12

score 4 · Answer 2 · answered May 11 '11 at 09:27

4

In your code, $(this) refers to the <select>, not the option. The prefix attribute does not exist on the <select>

This will cause the problem with the second example.

answered May 11 '11 at 09:27

James Wiseman

29,946
17
95
158

score 4 · Answer 3 · answered May 11 '11 at 09:28

4

The 2nd alert will return null, because <select> has no attribute prefix.

answered May 11 '11 at 09:28

DanielB

19,910
2
44
50

score 1 · Answer 4 · answered May 11 '11 at 09:31

1

What is it you are expecting exactly?

I find that the second alert - alert( $(this).attr('prefix') ); is the one causing a problem. As is, you get an alert of the prefix number, then an alert of null (caused by the second alert).

answered May 11 '11 at 09:31

phil

174
15

Following the tip off by @JohnP above - it does indeed work perfectly if you change the atrtibute `prefix` to something else. I presume `prefix` is reserved. Also, this is a bit more pretty - `$(document).ready(function() { $('#Nazione').change(function(){ alert ( $('option:selected', this).attr('prefix1') ); }); });` That code by @SLaks in [this thread](http://stackoverflow.com/questions/2230704/jquery-getting-custom-attribute-from-selected-option). – phil May 11 '11 at 09:57

score 0 · Answer 5 · answered Feb 24 '14 at 15:44

You probably wanted .val() not .attr('prefix'), to obtain selected value of <select>.

$(document).ready(function() {  
    $('#Nazione').change(function(){

        alert( $(this).find("option:selected").attr('prefix') );
        alert( $(this).val('prefix') );
    });
  });

Jquery select change

5 Answers5

Linked