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

1

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

answered Oct 15, 2014 at 23:29

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related