Selecting <option> from html using JQuery

Question

I kind of got stuck with this code here. I am trying to retrieve the option text.

HTML code <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function() { for(i=0; i<list.length; i++) { // assume list[i] contains different names var name_options = $('<option>' + list[i] + '</option>'); $('#names').append(name_options); } /* I want to retrieve data when a particular option is selected. But this doesnt work*/ $('#names').click(function(){ var val = $(this).find(':selected').html(); }); }); </script> </head> <body> <select id='names' class='combobox'> !-- options for names go here --> </select> </body> </html>

I was unable to retrieve the selected value. And hence i used $("#names") as my selector since $("#names option") does not work. What am I doing wrong here?

charlietfl · Accepted Answer · 2014-10-15 23:29:20Z

You want to use a change() handler and you can get the value directly from the <select> itself.

 $('#names').change(function(){ var val = $(this).val(); });

During the selection process you will have several click events which is one reason click() won't be of much help

artm · Accepted Answer · 2014-10-15 23:27:09Z

1

Try

$("#names option:selected").text();

or in your code

$(this).find(':selected').text();

answered Oct 15, 2014 at 23:27

artm

8,5943 gold badges28 silver badges43 bronze badges

2 Comments

user3908081 Over a year ago

A quik question, where is it recommended to use the "$(this).find(':selected').text();" ? After appending or before appending?

artm Over a year ago

After. But as charlietfl pointed out, better use change event rather than click.

Collectives™ on Stack Overflow

Selecting <option> from html using JQuery

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related