與特定的選擇值與jQuery的事件處理程序

Question

我想知道如何在基於特定選擇值的jQuery中觸發事件。所以，例如我有一個小的選擇和div像這樣：

<select id="sweets"> 
    <option value ="Option1">Option 1</option> 
    <option value ="Option2">Option 2</option> 
    <option value ="Option3">Option 3</option> 
</select> 
<div id='showthis'>You have selected option 2</div> 

我想要做一些像;

如果用戶選擇選項2，

$('#showthis').show(); 

如果用戶選擇的任何其他選項，

$('#showthis').hide(); 

我是相當新的jQuery的，我不知道怎麼做的改變事件基於特定的選擇值。 任何幫助將不勝感激。

Answer 1

$('#sweets').change(function(){ 
    var show = $(this).val() == 'Option2'; 
    $('#showthis').toggle(show); 
}); 

Answer 2

$('#sweets').change(function() { 
    if(this.selectedIndex === 1) { 
     $('#showthis').show(); 
    } else { 
     $('#showthis').hide(); 
    } 
}); 

或更好：

$('#sweets').change(function() { 
    $('#showthis').toggle(this.selectedIndex === 1); 
}); 

的selectedIndex屬性是引用選定的選項非常快速的方式。

使用toggle()^(docs)方法可以傳遞一個布爾作爲開關論點其中true == show和false == hide。

或者通過價值去做，你可以這樣做：

$('#sweets').change(function() { 
    var val = this.options[ this.selectedIndex ].value; 
    $('#showthis').toggle(val === 'Option1'); 
}); 

Answer 3

你試過嗎？

$('#sweets').change(function() { 
    if($(this).attr('value') == 'Option1') { 
     // do something 
    } else if($(this).attr('value') == 'Option2') { 
     // do something else 
    } // etc.. 
}