How to know which number option is selected using jquery

Question

I have one html page where i have set of select menu like this give below.

   <label>Product Details</label>
      <select id="PD">
         <xsl:for-each select="PRODUCT_DETAILS">
           <option value="{DATA0}"><xsl:value-of select="DATA0"></xsl:value-of></option>
         </xsl:for-each>
      </select>

   <label>Price Details</label>
      <select id="PRD">
         <xsl:for-each select="PRICE_DETAILS">
           <option value="{DATA1}"><xsl:value-of select="DATA1"></xsl:value-of></option>
         </xsl:for-each>
      </select>

This select menu option is getting populated by some multi row xml as you can see. Now I if I select Product Details option number 2 then from price details ,option number 2 should get select auto.

I just wanted to know how to get which option number is get selected using jquery like say if i select if i selected option number 2 in Product Details it should give 2 as a result.

And based on this value how can i select option number 2 in price details using option number only using jquery.

Answer 1

I think you are looking for the index of the selected option

To get

var index = $('#selectid option:selected').index(); // it gives 0 based index

To set

$('#selectid option').eq(index).prop('selected', true)

Demo: Fiddle

Answer 2

Here is simple example:

In HTML:

<select id="myselect">
    <option value="1">Mr</option>
    <option value="2">Mrs</option>
    <option value="3">Ms</option>
    <option value="4">Dr</option>
    <option value="5">Prof</option>
</select>

In JS:

$( "#myselect option:selected" ).index();

Read about .index() here. DEMO.

Answer 3

try something like this

document.getElementById("mySelect").selectedIndex;

The selectedIndex property sets or returns the index of the selected option in a drop-down list.

The index starts at 0.

Answer 4

$('#myselect').get(0).selectedIndex;