how to show/hide textarea based on select in jquery?

问题

i have a select field and a textarea one. And i am trying to hide/show the textarea in function of the select type i make:

<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();
}

or jsfiddle

any ideas?

thanks

回答1:

You have a few syntax errors, plus you're not binding the change event for the select

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

Bind the JS to the change event, and you had an extra period in there as well.

回答4:

You have some errors in your jquery code. Also you need to handle change event for your select. Here is the updated jsfiddle http://jsfiddle.net/uhv5R/6/

回答5:

First remove the period (.) from after the semi-colon on the first var line. Then wrap the if into a change() event-handler, and make the second if an 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.

This isn't, strictly, necessary. But it does make more sense to me, since the two conditions are related. On the other hand, it could also be just an else (rather than else if, since there's only really two options).

回答6:

Try:

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

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

回答7:

Remove the . from var textarea = $('textarea');. and you are good to go.

Btw, I presume that you are trying to show/hide textarea based on the drop down value onload of the page.

You need to change handler like below if you want to show/hide textarea based on dropdown selection,

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

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

来源：https://stackoverflow.com/questions/9525282/how-to-show-hide-textarea-based-on-select-in-jquery

标签

jquery

forms

select

hide

show