How to change the value of a select menu onchange

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
drayarms
Forum Contributor
Posts: 134
Joined: Fri Dec 31, 2010 5:11 pm

How to change the value of a select menu onchange

Post by drayarms »

I thought this was going to be a simple problem but it stumped me. Basically what I want to do is alert the id value of the option that is currently being displayed from a select menu. So if I select English, I want "en" to be alerted and if I select Spanish I want "es" alerted. So far with what I have, only "es" gets alerted regardless of which option I select. I guess it is because, the first child of the select menu is automatically chosen according to the code. So how do I make this work the way I want?
I also tried

$("option").change(function(){
alert($(this).attr("id"));
});

but it didn't work

Code: Select all



<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
  $("select").change(function(){
    alert($(this).children().attr("id"));
  });
});
</script>
</head>
<body>

<form>

<select id = "lang">

<option id = "es" value = "es">Spanish</option>
<option id = "en" value = "en">English</option>

</select>

</form>

</body>
</html>


User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: How to change the value of a select menu onchange

Post by social_experiment »

try the snippet below; hth

Code: Select all

jQuery('select#lang option').click(function(){
		var term = jQuery('select#lang option:selected').val();
		alert(term);
	});
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
twinedev
Forum Regular
Posts: 984
Joined: Tue Sep 28, 2010 11:41 am
Location: Columbus, Ohio

Re: How to change the value of a select menu onchange

Post by twinedev »

Didn't get to try it, but how does that work if you change the values via keyboard? I remember one time had a pain between onchange and onclick (via regular javascript) as for those used to using TAB between fields and the doing up/down arrow to change, it gave me headaches getting it to work well.
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: How to change the value of a select menu onchange

Post by social_experiment »

twinedev wrote:but how does that work if you change the values via keyboard?
good point; i'm not sure if the question is for me but here goes: even with the 'click' action is changed to 'change' using the keyboard doesn't show the alerts, this is refering to my script. The OP's script i couldn't get working either with change() in place.

http://api.jquery.com/change/
The first example i can't get to work but the second one works using change(); might be useful to OP.
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
danwguy
Forum Contributor
Posts: 256
Joined: Wed Nov 17, 2010 1:09 pm
Location: San Diego, CA

Re: How to change the value of a select menu onchange

Post by danwguy »

you should use change to handle this, and you don't want to access the id, you should use the value attribute in the option tag so...

Code: Select all

<!DOCTYPE html>
<head>
<script type='text/javascript'>
  $(document).ready(function() {
      $("select#language").change(function() {
          alert($(this).val());
      });
  });
</script>
</head>
<body>
  <select name='language' id='language'>
    <option value='0'>--Select to continue--</option>
    <option value='en'>English</option>
    //....
  </select>
</body>
</html>
above code will work (provided you have jquery included) on clicks or on keyboard change

A working jsfiddle example... http://jsfiddle.net/R68GU/
Post Reply