jquery show div after selecting option in form select

I want to show a div after clicking one of the options in a select form. How can I do this? Below my code that won't work.

thanks

<div class="type-select" style="width:500px;">
<select name="rechten" id="rechten">
  <option value="MYSET"><?php echo $lang->str("txt_myset"); ?></option>
      <option value="FULL"><?php echo $lang->str("txt_full"); ?></option>
      <option 开发者_运维问答value="PAY" id="show_pay"><?php echo $lang->str("txt_pay"); ?></option>
      <option value="NULL"><?php echo $lang->str("txt_null"); ?></option>                 
</select>
</div>


<div id="pay_block" style="width:500px;display:none;position:relative;">
<?php print($lang->str("txt_price")); ?>: 
<div class="type-text" >
  <textarea name="prijs" cols="140" id="prijs" style="height:18px"></textarea>  
</div>      
</div>


<script>
$("select#show_pay").click(function(){
    $("#pay_block").slideToggle("slow");
});
</script>   

---

$("select").change(function(){
    if($("#show_pay").is(":selected")){
        $("#pay_block").slideDown("slow");
    } else { $("#pay_block").slideUp("slow"); } 
});

---

It's probably not working because your selector is for a select element with the id show_pay. If I understand correctly, you want to show this div only when a particular option is selected. Here is one way - the div is shown only when the element selected is the one you want, in all other cases, it is hidden if currently shown.

$("#rechten").change(function(){ 
    if($("#rechten option:selected").attr('id') === 'show_pay'){ 
        $("#pay_block").slideDown("slow");
    }
    else{
        $("#pay_block").slideUp("slow");
    }
}

---

$(function () {
  $('select#rechten').change(function () {
    if ($('#pay_block').css('display')=='none')
        $("#pay_block").slideToggle("slow");
  });
});

http://jsfiddle.net/pDwCB/