html隐藏与显示选项,在选定的选项更改上显示和隐藏html元素

10 个答案:

答案 0 :(得分：9)

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

最后它应该是：

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

}

}

答案 1 :(得分：4)

您可以使用以下的jQuery

var selectBox = document.getElementById("show");

var selected = selectBox.options[selectBox.selectedIndex].value;

if(selected === '1'){

$('#text_area').show();

}

else{

$('#text_area').hide();

}

}

答案 2 :(得分：1)

你也可以使用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");

}

答案 3 :(得分：1)

试试这段代码：

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

}

});

答案 4 :(得分：1)

使用jQuery。

从中删除οnchange="change()"功能

在select元素上查找更改事件。

$('#show').on('change', function () {

var optionSelected = $("option:selected", this);

var valueSelected = this.value;

if(valueSelected == 1){

$("#text_area").show();

} else {

$("#text_area").hide();

}

});

醇>

答案 5 :(得分：0)

您通过document.getElementById获取html元素，返回正常的javascript对象。

Jquery方法hide()和show()仅适用于jquery对象。

但无论你想要实现什么，都可以通过简单的Javascript来实现，只做了一些简单的改动。

而不是show()和hide()分别使用textarea.style.display = "block"和textarea.style.display = "none";

并删除代码末尾的);。

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

答案 6 :(得分：0)

你可以在jQuery中这样做.....喜欢

＆＃34;

$(文件)。就绪(函数(){

var seletVal=$('#show option:selected').val();

if(selectVal=='1')

$('#textareaId').show();

else

$('#textareaId').hide();

});

＆＃34;

答案 7 :(得分：0)

你也可以按照以下方式使用jQuery。

$("#show").change(function(){

if($(this).val()=="1")

{

$("#text_area").show();

}

else

{

$("#text_area").hide();

}

});

答案 8 :(得分：0)

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

Element.prototype.hide(){

this.style.display = "hidden";

}

Element.prototype.show(style){

style = style ? style : "block";

this.style.display = style;

}

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

答案 9 :(得分：0)

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

}