根据jQuery的选择选项隐藏/显示的最佳方法是什么？

Question

我有一个选择，其中有两个选项。我希望默认选项在select元素下面显示一个输入，而另一个选项在选中时隐藏该输入，而是显示一段文本。我尝试过使用绑定和更改，但我无法让它工作。最好的方法是什么？

Answer 1

这是一个微小的，可重复使用的函数，通过show / hide减少了一些代码混乱。

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/