在选定的选项更改上显示和隐藏html元素 [英] Show and hide html element on selected option change

问题描述

在JSP页面中，我有一个下拉列表。当选择列表的第一个元素时，我希望在单击时显示文本区域。我是Javascript / Jquery的新手，所以我显然在函数中缺少一些东西（文本区域永远不会出现）。希望有人可以提供帮助。

In a JSP page, I have a dropdown list. When the first element of the list is selected, I want a text area to show right on click. I'm new to Javascript/Jquery, so I'm obviously missing something in the function (the text area never shows up). Hope someone can help.

这是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之上：

This is the function, on top of the 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>

推荐答案

你的功能结束时有误 - 删除最后 ）;

You have mistake at the end of your function - remove the last );

最后应该是：

<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";
    }
}

这篇关于在选定的选项更改上显示和隐藏html元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！