Grabbing the value of an <option> attribute to send with an AJAX query

Sorry if this sounds naive, but I am just learning javascript/jquery in order to make some AJAX calls.

Suppose I have something like this:

<select id="series">
<option value="1" onclick="[ajax function]">First</option>
<option value="2" onclick="[ajax function]">Second</option>
<option value="3" onclick="[ajax function]">Third</option>
<option value="4" onclick="[ajax function]">Fourth</option>
<option value="5" onclick="[ajax function]">Fifth</option>
<option value="6" onclick="[ajax function]">Sixth</option>
</select>

and I want to send an ajax query when one of the options is selected and I want send the value of the “value” attribute along as a parameter for a server side php function. How do I create a jquery variable that is equal to that value?

Does something like this work?

value = $('#series option').attr('value');

How does it know which option tag to grab the value from? Does it automatically grab the one that is clicked on?

I can’t really indicate ahead of time which option to grab as I don’t know which will be clicked.

–Kenoli

What is wrong with this code:


<select id="series">
<option value="1" >First</option>
<option value="2" >Second</option>
<option value="3" >Third</option>
<option value="4" >Fourth</option>
<option value="5" >Fifth</option>
<option value="6" >Sixth</option>
</select>

<script>
$('#series option').click(function() {
var value= $(this).attr('value');
alert(value);
})
</script>

My intention is that when an option is clicked, the value of the “value” attribute for the option value clicked will be assigned to the value variable and then sent to the user as an alert.

Nothing happens.

I have linked to jquery in the header and other jquery actions work on the page.

–Kenoli

I am new to Jquery.
var value= $(‘#series option:selected’).attr(‘value’);

  
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery ve AJAX i&#351;lemleri</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
	

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

//var value= $('select option:selected').val();
//var value= $('select option:selected').attr('value');
var value= $('#series option:selected').attr('value');
alert(value);
})
})

/*
alert($('select:eq('+$(this).index()+') option:selected').html());
alert($('select:eq('+$(this).index()+') option:selected').text());
alert( $($(this+ 'option:selected')[$(this).index()]).text() );
*/
</script>
</head>
<body>



<select id="series">
<option value="1" >First</option>
<option value="2" >Second</option>
<option value="3" >Third</option>
<option value="4" >Fourth</option>
<option value="5" >Fifth</option>
<option value="6" >Sixth</option>
</select>

http://www.eburhan.com/jquery-ve-ajax-islemleri/
http://www.eburhan.com/wp-content/ekler/91/ornek_3B.php

serialize()

This code is working Firefox 4.0b9

  
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery ve AJAX i&#351;lemleri</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
$('#series option').click(function() { 
var value= $(this).attr('value');
alert(value);
})
})

</script>
</head>
<body>

<select id="series" multiple>
<option value="1" >First</option>
<option value="2" >Second</option>
<option value="3" >Third</option>
<option value="4" >Fourth</option>
<option value="5" >Fifth</option>
<option value="6" >Sixth</option>
</select>

I just tried the script in your most recent post and it works, though, I am wondering why the “mulitple” is required. This causes problems with my form layout. Is there some way to get it to work without multiple so it presents as a pulldown menu???

Ther earlier one works and presents as a pulldown menu.

When I have some time later, I will have to take a look at it closely and understand how it works.

Thanks,

–Kenoli

<select multiple=“multiple”>

http://www.w3schools.com/tags/tag_select.asp

multiple : Specifies that multiple options can be selected at once
size : Defines the number of visible options in a drop-down list

<select size=“2”>

http://www.w3schools.com/tags/att_select_size.asp
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_size

muazzez –

My question was not about the multiple attribute itself, but why the javascript only works when it is set.

At any rate, thanks. The script works perfectly and makes sense. A good learning for me.

–Kenoli