Detect HTML Option Value Using jQuery

Question

Possible Duplicate:
How to get the text of the selected option of a select using jquery?

I have the following script:

<select id = "people">
<option value = "0">Choose</option>
<option value = "1">John</option>
<option value = "2">David</option>
</select>

How Can I use jQuery to detect the value of the option that is currently selected?

i.e. (pseudo-ish code)

if(people.option.text == "Choose"){
   //Alert - Please make a selection
}else{
   //Valid - do something
}

EDIT: code not working

  echo("<script>");
  echo("$(document).ready(function(){");
  echo("$(\"#go\").click(function(e){");
  echo("var selText = $(\"#people option:selected\").text();");
  echo("if(selText == \"Choose\"){");

  echo("}else{");
  echo("window.location.href = \"viewprofile.php\";");
  echo("}");
  echo("});");
  echo("});");
  echo("</script>");

It constantly triggers the else statement and navigates away...

EDIT: Got it working -> changed .text() and val()

First of all, your `value` attribute value should be enclosed in double quotes like that: `` — Tadeck, Aug 17 '11 at 12:25
There is not reason whatsoever to use `echo` here. Just put the markup/JS code in the file. — Felix Kling, Aug 17 '11 at 17:19

score 1 · Accepted Answer · answered Aug 17 '11 at 12:30

1

From your example looks like you want to get the selected text, not value.

So have this:

var selText = $("#people option:selected").text();
if(selText == "Choose") {
   //Alert - Please make a selection
} else {
   //Valid - do something
}

To get selected value and check it, have such code:

var selValue = parseInt($("#people").val(), 10);
if (selValue == 0) {
    //Alert - Please make a selection
} else {
    //Valid - do something
}

answered Aug 17 '11 at 12:30

Shadow The GPT Wizard

66,030
26
140
208

This is what I want! I'm trying this but to no avail..I have updated my code. The only difference is I'm using php to write the HTML - but this shouldn;t affect matters – user559142 Aug 17 '11 at 13:03
Can you look at my edit->my code always seems to fire the else statement... – user559142 Aug 17 '11 at 13:15
When you add `alert('selected text: ' + selText);` what do you see? – Shadow The GPT Wizard Aug 17 '11 at 13:15

calumbrodie · Answer 2 · 2011-08-17T12:36:53.707

0

if ($('#people [value!=0]:selected').length > 0){
    //selected
} else {
    //not selected
}

edited Aug 17 '11 at 12:36

answered Aug 17 '11 at 12:23

calumbrodie

4,722
5
35
63

but my default option is "choose" so that won't work – user559142 Aug 17 '11 at 12:25
That's not shown in your html though. Edited answer – calumbrodie Aug 17 '11 at 12:33
It is--> ... – user559142 Aug 17 '11 at 12:48
NO ITS NOT - you are not showing which element is selected. You say 'my default option is choose'. Your code doesn't show that. The current (default) selected option *should* be shown by selected="selected". – calumbrodie Aug 17 '11 at 13:12
@kissmyface: If no option is marked as selected, by default, the first one is selected. – Felix Kling Aug 17 '11 at 13:43

Tae-Sung Shin · Answer 3 · 2011-08-17T12:32:48.387

0

How about this:

        $("select option:selected").each(function () {
            if($(this).text()=="Choose") ...
            else ...
        });

edited Aug 17 '11 at 12:32

answered Aug 17 '11 at 12:24

Tae-Sung Shin

20,215
33
138
240

I need to detect whether the selected value is equal to 'choose'...so just a simple if/else that checks the selected value – user559142 Aug 17 '11 at 12:25

score 0 · Answer 4 · answered Aug 17 '11 at 12:24

0

if (jQuery('#people option:selected').val()=="Choose"){
}
else{
}

answered Aug 17 '11 at 12:24

J0HN

26,063
5
54
85

score 0 · Answer 5 · answered Aug 17 '11 at 12:26

Check the value that is selected using val, then take the appropriate action. Shown below in a form submission handler to prevent form submission. You might also want to consider using the validate plugin for this particular case, making the field required, and having the default option have no value.

$(function() {
   $('form').submit( function() {
       var selectedPerson = $('#people').val();
       if (!selectedPerson || selectedPerson == '0') {
          alert('you must choose an option for people');
          return false;
       }
       // continue form validation and submission
   });
});

score 0 · Answer 6 · answered Aug 17 '11 at 12:26

0

To get the value of the selected <option>, use:

$('select').val()

To get the HTML content of the selected <option>, use:

$'select :selected').html()

And to check if a certain <option> is selected, use:

if ($('option').is(':selected')) ...

answered Aug 17 '11 at 12:26

Abraham

20,316
7
33
39

Detect HTML Option Value Using jQuery

6 Answers6