Javascript 在选定选项更改时显示和隐藏 html 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27921922/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show and hide html element on selected option change
提问by user3673449
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.
在 JSP 页面中，我有一个下拉列表。选择列表的第一个元素时，我希望在单击中显示一个文本区域。我是 Javascript/Jquery 的新手，所以我显然在函数中遗漏了一些东西（文本区域从未出现）。希望有人能帮忙。
This is the HTML:
这是 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>
This is the function, on top of the JSP:
这是在 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>
回答by alvery
You have mistake at the end of your function - remove the last );
您在函数末尾出错 - 删除最后一个 );
Finally it should be:
最后应该是：
<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";
}
}
回答by Yaman
You can use jQuery as following
您可以使用 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>
回答by anurag
Use jQuery.
Remove
onchange="change()"function from<select id="show" class="form-control" name="show_text_area" onchange="change()">Look for change event, on your select element.
$('#show').on('change', function () { var optionSelected = $("option:selected", this); var valueSelected = this.value; if(valueSelected == 1){ $("#text_area").show(); } else { $("#text_area").hide(); } });
使用 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(); } });
回答by Praveen
Try this code:
试试这个代码：
// 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();
}
});
回答by Mitul Maheshwari
you can use jquery also.
你也可以使用 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");
}
回答by Sadikhasan
回答by Rawat Raman
You are getting the html element by document.getElementByIdthat returns normal javascript object. Jquery methods hide()and show()are available for jquery objects only.
您正在通过document.getElementById获取 html 元素，该元素返回正常的 javascript 对象。jquery方法hide()和show()仅可用于jquery 对象。
But whatever you want to achieve can be achieved by simple Javascript, just made some simple changes.
但是无论你想实现什么都可以通过简单的Javascript来实现，只需要做一些简单的改动。
instead of show() and hide() use respectively textarea.style.display = "block"and textarea.style.display = "none";
而不是 show() 和 hide() 分别使用textarea.style.display = "block"and textarea.style.display = "none";
and remove the );in the end of your code.
并删除);代码末尾的 。
use the fiddle link for working example. fiddle link
使用小提琴链接作为工作示例。小提琴链接
回答by A Beginner
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");
}
回答by swapnil patil
you can do this in jQuery.....like " $(document).ready(function(){
您可以在 jQuery 中执行此操作..... 就像“ $(document).ready(function(){
var seletVal=$('#show option:selected').val();
if(selectVal=='1')
$('#textareaId').show();
else
$('#textareaId').hide();
});
"
”
回答by degr
Your function is correct, but js Element class have no show() and hide() methods. You can implement it using prototype. As an example
您的函数是正确的，但是 js Element 类没有 show() 和 hide() 方法。您可以使用原型来实现它。举个例子
Element.prototype.hide(){
this.style.display = "hidden";
}
Element.prototype.show(style){
style = style ? style : "block";
this.style.display = style;
}
But better use jquery or something like this.
但最好使用 jquery 或类似的东西。
