access selected option in jquery

Vishal Basumatary -

Accessing Selected Option in jQuery

If you are working with forms and want to access the selected option of a drop-down list in jQuery, then you can use the following methods:

Method 1: Using .val()

The simplest way to get the selected value of a drop-down list is by using the .val() method in jQuery. Here's an example:


// HTML code
<select id="mySelect">
  <option value="1">Option 1</option>
  <option value="2" selected>Option 2</option>
  <option value="3">Option 3</option>
</select>

// jQuery code
var selectedValue = $('#mySelect').val();

// Output
console.log(selectedValue); // Output: "2"

The .val() method will return the selected value of the drop-down list. In the above example, the second option is selected by default, so the value of "2" will be returned.

Method 2: Using .find()

You can also use the .find() method to get the selected option of a drop-down list. Here's an example:


// HTML code
<select id="mySelect">
  <option value="1">Option 1</option>
  <option value="2" selected>Option 2</option>
  <option value="3">Option 3</option>
</select>

// jQuery code
var selectedOption = $('#mySelect').find(':selected');

// Output
console.log(selectedOption); // Output: <option value="2" selected>Option 2</option>
console.log(selectedOption.val()); // Output: "2"

The .find() method will return the selected option of the drop-down list as a jQuery object. You can then use the .val() method on this object to get the selected value.

Method 3: Using .selectedIndex

Another way to get the selected option of a drop-down list is by using the .selectedIndex property. Here's an example:


// HTML code
<select id="mySelect">
  <option value="1">Option 1</option>
  <option value="2" selected>Option 2</option>
  <option value="3">Option 3</option>
</select>

// jQuery code
var selectedIndex = $('#mySelect')[0].selectedIndex;
var selectedOption = $('#mySelect')[0].options[selectedIndex];

// Output
console.log(selectedOption); // Output: <option value="2" selected>Option 2</option>
console.log(selectedOption.value); // Output: "2"

The .selectedIndex property will return the index of the selected option (starting from 0). You can then use this index to access the selected option using the .options[] array.

These are the three methods you can use to access the selected option in jQuery. Choose the one that best suits your needs and coding style.