how to get the selected index of a drop down

Question

I have a normal dropdown which I want to get the currently selected index and put that in a variable  Jquery or javascript  Jquery perfered    lt select name  CCards  gt   lt option value  0  gt Select Saved Payment Method  lt  option gt   lt option value  1846  gt test  xxxx1234 lt  option gt   lt option value  1962  gt test2  xxxx3456 lt  option gt   lt  select gt

User · Answer

This will get the index of the selected option on change:

_x000D_

$('select').change(function(){_x000D_
    console.log($('option:selected',this).index()); _x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<select name="CCards">_x000D_
<option value="0">Select Saved Payment Method:</option>_x000D_
<option value="1846">test  xxxx1234</option>_x000D_
<option value="1962">test2  xxxx3456</option>_x000D_
</select>

_x000D_

User · Answer

the actual index is available as a property of the select element   var sel   document getElementById  CCards    alert sel selectedIndex     you can use the index to get to the selection option  where you can pull the text and value   var opt   sel options sel selectedIndex   alert opt text   alert opt value

User · Answer

select name  CCards   option selected   should do the trick  See jQuery documentation for more detail  http   api jquery com selected-selector   UPDATE  if you need the index of the selected option  you need to use the  index   jquery method      select name  CCards   option selected   index

User · Answer

You can also use  checked for  lt select gt  elements  e g    document querySelector  select option checked   document querySelector  select option checked   getAttribute  value     You don t even have to get the index and then reference the element by its sibling index

User · Answer

lt select name  CCards  id  ccards  gt       lt option value  0  gt Select Saved Payment Method  lt  option gt       lt option value  1846  gt test  xxxx1234 lt  option gt       lt option value  1962  gt test2  xxxx3456 lt  option gt   lt  select gt    lt script type  text javascript  gt           Jquery         var selectedValue       ccards   val              Regular Javascript         var selectedValue2   document getElementById  ccards   value     lt  script gt

User · Answer

If you are actually looking for the index number  and not the value  of the selected option then it would be  document forms 0  elements  CCards   selectedIndex     You may need to change document forms 0  to reference the correct form      or using jQuery     select name  CCards     0  selectedIndex

[javascript] how to get the selected index of a drop down

Examples related to javascript

Examples related to jquery