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

Question

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

Gabe · Accepted Answer · 2012-03-01 22:41:08Z

3

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

answered Mar 1, 2012 at 22:41

Gabe

50.6k29 gold badges147 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex · Accepted Answer · 2012-03-01 22:39:20Z

3

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

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

});

answered Mar 1, 2012 at 22:39

Alex

35.5k5 gold badges81 silver badges94 bronze badges

Comments

Justice Erolin · Accepted Answer · 2012-03-01 22:40:28Z

1

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

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

answered Mar 1, 2012 at 22:40

Justice Erolin

2,89921 silver badges19 bronze badges

Comments

DG3 · Accepted Answer · 2012-03-01 22:40:36Z

1

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/

answered Mar 1, 2012 at 22:40

DG3

5,32617 gold badges54 silver badges63 bronze badges

Comments

David Thomas · Accepted Answer · 2012-03-01 22:42:19Z

1

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).

answered Mar 1, 2012 at 22:42

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Comments

switz · Accepted Answer · 2012-03-01 22:43:19Z

1

Try:

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

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

answered Mar 1, 2012 at 22:43

switz

25.3k27 gold badges79 silver badges106 bronze badges

Comments

Selvakumar Arumugam · Accepted Answer · 2012-03-01 22:47:26Z

1

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

edited Mar 1, 2012 at 22:47

answered Mar 1, 2012 at 22:39

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

Collectives™ on Stack Overflow

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

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related