Page 1 of 1

How to change the value of a select menu onchange

Posted: Mon Nov 26, 2012 4:07 am
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>



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

Posted: Mon Nov 26, 2012 3:36 pm
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);
	});

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

Posted: Thu Nov 29, 2012 3:09 am
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.

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

Posted: Thu Nov 29, 2012 3:39 am
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.

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

Posted: Fri Dec 14, 2012 5:16 pm
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/