jquery show div選擇後形式選擇

Question

我想單擊選擇表單中的一個選項後顯示div。 我該怎麼做？在我的代碼下面，這是行不通的。

感謝

<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> 

Answer 1

它可能不工作，因爲你的選擇是與ID show_pay一個select元素。如果我理解正確，當您選擇特定的option時，您只想顯示此div只有。這裏有一種方法 - div僅在所選元素是您想要的元素時顯示，在其他情況下，如果當前顯示則隱藏。

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

Answer 2

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

http://jsfiddle.net/pDwCB/

Answer 3

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