在选定选项更改时显示和隐藏 html 元素答案

【问题标题】：Show and hide html element on selected option change在选定选项更改时显示和隐藏 html 元素
【发布时间】：2017-01-30 13:07:37
【问题描述】：

在 JSP 页面中，我有一个下拉列表。 When the first element of the list is selected, I want a text area to show right on click.我是 Javascript/Jquery 的新手，所以我显然在函数中遗漏了一些东西（文本区域永远不会出现）。希望有人能帮忙。

这是 HTML：

<tr class="odd gradeX">
    <td class="col-lg-3">
        <div>
            <label>Show text area</label>
            <select id="show" class="form-control" name="show_text_area" onchange="change()">
                <option value="1">YES</option>
                <option value="0">NO</option>
            </select>

        </div>
    </td>
    <td class="col-lg-3">
        <div>
            <label>Text area</label>
            <textarea id="text_area" class="form-control" type="text" name="text_area" placeholder="Write something" rows="5" cols="50" style="display: none"></textarea>
        </div>
    </td>
</tr>

这是在 JSP 之上的函数：

<script> function change() {
    var selectBox = document.getElementById("show");
    var selected = selectBox.options[selectBox.selectedIndex].value;
    var textarea = document.getElementById("text_area");
    if(selected === '1'){
        textarea.show();
    }
    else{
        textarea.hide();
    }
});</script>

【问题讨论】：

用var selected = selectBox.options[selectBox.selectedIndex].value;代替这个var selected = selectBox.value;

标签： javascript jquery html jsp

【解决方案1】：

你的函数结束时有错误 - 删除最后一个 );

最后应该是：

<select id="show" class="form-control" name="show_text_area" onchange="change(this)">


function change(obj) {


    var selectBox = obj;
    var selected = selectBox.options[selectBox.selectedIndex].value;
    var textarea = document.getElementById("text_area");

    if(selected === '1'){
        textarea.style.display = "block";
    }
    else{
        textarea.style.display = "none";
    }
}

【讨论】：

【解决方案2】：

你可以像下面这样使用jQuery

<script> function change() {
    var selectBox = document.getElementById("show");
    var selected = selectBox.options[selectBox.selectedIndex].value;

    if(selected === '1'){
        $('#text_area').show();
    }
    else{
        $('#text_area').hide();
    }
}</script>

【讨论】：

我必须删除最后一个 ) 才能让它工作，但是当我这样做时它为我完成了工作。

【解决方案3】：

使用 jQuery。

从

中移除onchange="change()"函数

<select id="show" class="form-control" name="show_text_area" onchange="change()">

在您的选择元素上查找更改事件。

$('#show').on('change', function () {
   var optionSelected = $("option:selected", this);
   var valueSelected = this.value;
   if(valueSelected == 1){
       $("#text_area").show();
   } else {
       $("#text_area").hide();
   }
});

Fiddle

【讨论】：

【解决方案4】：

你也可以使用 jquery。

$('#show').val();
   if( $('#show').val() == "1")
    {
         $('#text_area').show(); 
              OR
           $("#text_area").css("visibility", "visible");
   }else
   {
      $('#text_area').hide(); 
              OR
           $("#text_area").css("visibility", "hidden");
  }

【讨论】：

【解决方案5】：

试试这个代码：

// This will create an event listener for the change action on the element with ID 'show'
$('#show').change(function() {

     // If checkbox is 'checked'
    if($(this).is(':checked')) {
        // show the element that has the id 'txt_area' 
        $('#text_area').show();
    } else {
        // hide it when not checked
        $('#text_area').hide();
    }
});

【讨论】：

而不是仅仅发布代码（未格式化）解释代码为什么有效，或者用户做错了什么。
感谢 Styphon 的建议。我会解释的。下次会注意的
这是我一直在寻找的，我已经理解的东西，可以轻松复制并粘贴到我的项目中，而无需太多格式化。

【解决方案6】：

您也可以使用 jQuery，如下所示。

$("#show").change(function(){
   if($(this).val()=="1")
   {    
       $("#text_area").show();
   }
   else
   {
       $("#text_area").hide();
   }
});

Demo

【讨论】：

【解决方案7】：

var drpVal=  $('#show').val();
if( drpVal == "1")
{
     $('#text_area').show(); 
          // or u can use
       $("#text_area").css("display", "");
 }
 else{
  $('#text_area').hide(); 
          // or u can use
       $("#text_area").css("display", "none");
 }

【讨论】：

【解决方案8】：

你可以在 jQuery 中做到这一点.....就像 " $(document).ready(function(){

var seletVal=$('#show option:selected').val();
if(selectVal=='1')
$('#textareaId').show();
else
$('#textareaId').hide();
});

"

【讨论】：

【解决方案9】：

您正在通过 document.getElementById 获取 html 元素，该元素返回正常的 javascript 对象。 Jquery 方法 hide() 和 show() 仅适用于 jquery 对象。

但是你想要实现的任何东西都可以通过简单的Javascript来实现，只需做一些简单的改变。

分别使用textarea.style.display = "block"和textarea.style.display = "none"代替show()和hide()；

并删除代码末尾的);。

使用小提琴链接作为工作示例。 fiddle link

【讨论】：

【解决方案10】：

你的函数是正确的，但是 js Element 类没有 show() 和 hide() 方法。您可以使用原型来实现它。举个例子

Element.prototype.hide(){
this.style.display = "hidden";
} 
Element.prototype.show(style){
style = style ? style : "block";
this.style.display = style;
}

但最好使用 jquery 或类似的东西。

【讨论】：