jQueryで選択したオプションに応じて表示/非表示に最適な方法は？

Question

私は選択肢が2つあります。私はデフォルトのオプションを選択要素の下に表示する入力をしたいと思いますが、他のオプションを選択すると、その入力が隠され、代わりにテキストの段落が表示されます。私はバインドと変更を使用してみましたが、それを動作させることはできません。これを行う最善の方法は何ですか？

Answer 1

これらの線に沿って何かがトリックを行う必要があります。

​<select id="foo"> 
    <option value="1">Enter a value</option> 
    <option value="2">Show some text</option> 
</select> 

<input id="input" type="text"/> 

<p id="text" style="display:none"> 
    Blah blah blah blah blah blah blah blah 
    blah blah blah blah blah blah blah blah 
</p>​​​​​​​​​​​ 

---

​$('#foo').change(function() { 
    var el = $(this); 
    if(el.val() === "1") { 
     $('#input').show(); 
     $('#text').hide();    
    } else { 
     $('#text').show(); 
     $('#input').hide(); 
    }  
});​​​​​​ 

http://jsfiddle.net/J5Enp/

Answer 2

ここで表示/非表示といくつかのコードの乱雑さを低減し、小さな、再利用可能な機能です。

jQuery.fn.showIf = function (condition) { 
return this[condition ? 'show' : 'hide'](); 
} 

あなたはこのようにそれを使用します。

$('#foo').change(function() { 
    $('#input').showIf(el.val() === "1"); 
    $('#text').showIf(el.val() !== "1"); 
});