Detect when a specific <option> is selected with jQuery

Question

I'd like jQuery to detect when the option with the id trade_buy_max is selected.

$(document).ready(function() {      $("option#trade_buy_max").select(function () {          //do something      });  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>  <select name='type' id='type'>      <option id='trade_buy' value='1' selected='selected'>Buy</option>      <option id='trade_buy_max' value='1'>Buy max</option>      <option id='trade_sell' value='2'>Sell</option>      <option id='trade_sell_max' value='2'>Sell max</option>  </select>

I've tried the following, but it doesn't seem to work.

Any ideas?

Answer 1

This works... Listen for the change event on the select box to fire and once it does then just pull the id attribute of the selected option.

$("#type").change(function(){   var id = $(this).find("option:selected").attr("id");    switch (id){     case "trade_buy_max":       // do something here       break;   } }); 

Answer 2

What you need to do is add an onchange handler to the select:

$('#type').change(function(){    if($(this).val() == 2){      /* Do Something */   } });