javascript - jQueryで選択したオプションに応じて非表示/表示する最良の方法は？

Question

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

Answer 1

これは、表示/非表示でコードの乱雑さを軽減する、小さくて再利用可能な関数です。

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

次のように使用します。

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

Answer 2

これらの行に沿った何かがうまくいくはずです:

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