"How do you get the current value from a select list?"

Post date: Dec 5, 2008 3:06:36 PM

"How do you get the current value from a select list?"

To get the current value is very simple using val().

JavaScript:

$('#selectList').val();

But sometimes you may need to get the selected option's text. This is not as straight forward. First, we get the selected option with :selected selector. Then once we have the option, we can get the text with the function, text().

JavaScript:

$('#selectList :selected').text()

This would be how to set a select multiple to an array called, "foo".

JavaScript:

var foo = [];

$('#multiple :selected').each(function(i, selected){

foo[i] = $(selected).text();

});

the original is here http://marcgrabanski.com/article/jquery-select-list-values

jQuery: Select Boxes and change() events

Posted by Jetlogs @ 4:53 pm

Category: Web Development, jQuery

Here is a very simple jQuery trick to display a message depending on which option is currently selected on a select box. This is very useful especially when there is a need for an explanation or give additional information on some items within a select box.

Here is a demo of this tutorial at work:

You have selected the second item

Quite handy isn’t it? Here is how to do it in a few simple steps:

First of all, we need to have our select box. Here is how the select box above looks like in code view

<select id="item_select" name="item">

<option>Select an Item</option>

<option value="1">Item 1</option>

<option value="2">Item 2</option>

<option value="3">Item 3</option>

</select>

For our demo, we will give the select box an id called “item_select” (#item_select) so we can access it later on via jQuery.The values for each option is going to be important as we move on.

The next step will now be creating an array of messages that will correspond to the values of each option. The easiest way to do this is by using the values of each option as the array’s index. Here is how to do it. Place this within the <script> tags:

var message = new Array();

message[1] = "You have selected first item";

message[2] = "You have selected the second item";

message[3] = "You have selected the last item";

Now, the only thing missing is the container in which message will appear. Let’s create a div with an id called “message_display” for this purpose:

<div id="message_display"></div>

Now for the final piece of the puzzle: To show our message when a user selects an option, we must assign the change() event of #item_select with the message display. Then we must assign the value of the option selected as the index of the message we want to display. Here is how to do it:

<script type="text/javascript">

var message = new Array();

message[1] = "You have selected first item";

message[2] = "You have selected the second item";

message[3] = "You have selected the last item";

$(document).ready(function(){

$("#item_select").change(function()

{

var message_index

message_index = $("#item_select").val();

$("#message_display").empty();

if (message_index > 0)

$("#message_display").append(message[message_index]);

});

});

</script>

The important thing to note here is that we must empty() the #message_display div or else the messages will keep on stacking due to the append() command.

That is all for the tutorial for today.

http://jetlogs.org/2007/09/03/jquery-select-boxes-and-change-events/

(c)left gg

$("#mySelect option:first").val() should work to get the value of the first option.

$("#mySelect option[value=CHECKVALUE]").attr("selected",true); will work to select an option based on it's value (replace CHECKVALUE with the value you are checking for, of course).