jqueryを使用した特定の選択値に対するイベントハンドラ

Question

特定の選択値に基づいてjQueryでイベントを発生させる方法を知りたいと思います。だから、私は小さなselectと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プロパティは、選択されたオプションを参照するための非常に高速な方法です。あなたはtrue == showとfalse == hideスイッチ引数としてブール値を渡すことができtoggle()^(docs)メソッドを使用して

。

または値でそれを行うには、あなたがこれを行うことができます：

$('#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.. 
}