如何根据 jquery 中的选择显示/隐藏文本区域？答案

【问题标题】：how to show/hide textarea based on select in jquery?如何根据 jquery 中的选择显示/隐藏文本区域？
【发布时间】：2012-03-20 11:35:46
【问题描述】：

我有一个选择字段和一个文本区域。我正在尝试隐藏/显示我所做的选择类型的函数中的文本区域：

<select id="select" name="management">
    <option value="0" selected="">Select One</option>
    <option value="1">Yes</option>
    <option value="0">No</option>
</select>
<textarea id="textarea" name="searching_gig_des" wrap="VIRTUAL" cols="50" rows="5"></textarea>

var textarea = $('textarea');.
var select   = $('#select').val();

textarea.hide();

if (select == '1'){
  textarea.show();
}
if (select == '0'){
  textarea.hide();
}

或jsfiddle

有什么想法吗？

谢谢

【问题讨论】：

标签： jquery forms select hide show

【解决方案1】：

您有一些语法错误，而且您没有为 select 绑定 change event

$('#select').change(function(){

        var textarea = $('textarea');
        var select   = $(this).val();

        textarea.hide();

        if (select == '1'){
          textarea.show();
        }
        if (select == '0'){
          textarea.hide();
        }
});

jsfiddle

【讨论】：

【解决方案2】：

$('#select').change(function(){
    var value = $(this).val();
    var textarea = $('textarea');

    if (value == '1'){
        textarea.show();
    }
    if (value == '0'){
        textarea.hide();
    }

});

【讨论】：

【解决方案3】：

http://jsfiddle.net/uhv5R/5/

将 JS 绑定到 change 事件，你也有一个额外的时间。

【讨论】：

【解决方案4】：

您的 jquery 代码中有一些错误。您还需要为您的选择处理更改事件。 Here 是更新的jsfiddle http://jsfiddle.net/uhv5R/6/

【讨论】：

【解决方案5】：

首先删除第一行 var 分号后的句点 (.)。然后将if 包装到change() 事件处理程序中，并将第二个if 设置为else if*：

var textarea = $('#textarea');
var select   = $('#select').val();

textarea.hide();

$(select).change(
    function(){
        if (select == 1){
          textarea.show();
        }
        else if (select == 0){
          textarea.hide();
        }
    });

JS Fiddle update.

严格来说，这不是必需的。但这对我来说确实更有意义，因为这两个条件是相关的。另一方面，它也可能只是一个else（而不是else if，因为实际上只有两个选项）。

【讨论】：

【解决方案6】：

试试：

var textarea = $('textarea');
$('#select').change(function() {
    if ($(".yes:selected").val() == 1) {
        textarea.show();
    }
    else {
        textarea.hide();
    }
});

http://jsfiddle.net/uMTmm/1/

【讨论】：

【解决方案7】：

从var textarea = $('textarea');. 中删除.，您就可以开始了。

顺便说一句，我假设您正在尝试根据页面的下拉值 onload 来 show/hide textarea。

如果你想根据下拉选择显示/隐藏文本区域，你需要像下面这样更改处理程序，

var $select = $('#select');

$select.change(function() {
    var select = $(this).val();
    if (select == '1') {
        textarea.show();
    }
    if (select == '0') {
        textarea.hide();
    }
});

【讨论】：