How to get the selected text instead of value in dropdown menu

Question

I am trying to get the user selected texts for my dropdown menu.

I have

   var selectMenu=document.createElement('select');
            selectMenu.className='menu';

        for(var i=0; i<array.length; i++){

           var option=document.createElement('option');
               option.className='option';
               option.innerHTML=array[i].name;
               option.value=array[i].id;

            selectMenu.appendChild(option);
         }

         $(selectMenu).change(function(){

           //i want to get the selected text here

           //I know I could get value by using $(this).val()
           //but not sure how to get the selected text here.

         })

I have google the issue and all I found are like

$('#menu option:selected).text().

Are there anyways to get what I need? Thanks a lot!

http://stackoverflow.com/questions/1643227/get-selected-text-from-dropdownlist-using-jquery — Radi, Jan 04 '13 at 21:33

score 7 · Accepted Answer · answered Jan 04 '13 at 21:36

7

if you have something like

<select>
    <option value='1'> SO</option>
    <option value='2'>GOOGLE</option>
</select>

you can try

$("select").change(function(e){
    console.log($(":selected",this).text());
});

http://jsfiddle.net/Ykzp7/

answered Jan 04 '13 at 21:36

Rafay

30,950
5
68
101

works like a charm! thanks! (need to wait before I give you green.) – FlyingCat Jan 04 '13 at 21:38

score 1 · Answer 2 · answered Jan 04 '13 at 21:34

1

try $('.menu option:selected).text() instead of $('#menu ...

answered Jan 04 '13 at 21:34

obs

797
3
14
37

How to get the selected text instead of value in dropdown menu

2 Answers2