javascript - Jquery method for HTML <option> selected -

what correct method selecting of these options in jquery?

<select>   <option id="x" >a</option>   <option>b</option>   <option>c</option>   <option>d</option> </select>  <div id="one"></div> 

this doesn't work:

$("#x").click(function(){     $("#one").fadeout(1000); }); 

or select:

$("#x").select(function(){     $("#one").fadeout(1000); }); 

ps: imagine have 3 options , 3 divs fadeout. how can select of 3 options specific div? this:

<select> <option id="x" >a</option> <option id="y">b</option> <option id="z">c</option> </select>  <div id="one"></div> <div id="two"></div> <div id="three"></div> 

for option x want div 1 fadeout, option y div 2 , option z div 3

change html , have use id in select element

html

<select id="x">   <option>a</option>   <option>b</option>   <option>c</option>   <option>d</option> </select> 

js

$("#x").change(function(){     $("#one").fadeout(1000); }); 

or if place id in option this

$("#x").parent().change(function() {     $("#one").fadeout(1000); }); 

for updated new question use id data-attribute or common class in html

html

<select>     <option id="x">a</option>     <option id="y">b</option>     <option id="z">c</option> </select> <div id="one" data-id="x">x</div> <div id="two" data-id="y">y</div> <div id="three" data-id="z">z</div> 

js

$("select").change(function () {     var id = $(this).find("option:selected")[0].id;     //use commaon class or use attrbute      //$(".commonclass").hide();     $("[data-id]").hide()     $("[data-id=" + id + "]").show();  }).change(); 

demo