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

帅比萌擦擦* 提交于 2020-06-17 06:13:10

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!