首页 >web前端 >html教程 >关于HTML下拉列表改变文本框属性_html/css_WEB-ITnose

关于HTML下拉列表改变文本框属性_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 11:57:011454浏览

比如 
    
想在 下拉框选中 2时 文本框隐藏 让style 属性="display:none"   试了好多中方法都行,是不能改style的值吗?


回复讨论(解决方案)

<select  name="select" onChange="disinput(this)">                	<option value="1">1</option>                	<option value="2">2</option>                    </select>    <input type="text" id="text" name="text"  value="" />	<script type="text/javascript">		function disinput(obj){			if(obj.value==2){				document.getElementById("text").style.display="none";			}else{document.getElementById("text").style.display="block";}		}	</script>

<select  name="select" onChange="disinput(this)">                	<option value="1">1</option>                	<option value="2">2</option>                    </select>    <input type="text" id="text" name="text"  value="" />	<script type="text/javascript">		function disinput(obj){			if(obj.value==2){				document.getElementById("text").style.display="none";			}else{document.getElementById("text").style.display="block";}		}	</script>

  这样确实可以实现,但是当在显示的时候文本框会换到下一行....有方法解决这个问题吗 T T~    @ly12530 @Null_Reference

<select  name="select" onChange="disinput(this)">                <option value="1">1</option>                <option value="2">2</option>                </select><input type="text" id="text" name="text"  value="" /> <script type="text/javascript">	function disinput(obj){		if(obj.value==2){			document.getElementById("text").style.display="none";		}else{document.getElementById("text").style.display="";}	}</script>

如果还原默认的话就可以不换行了,block的话就成块级元素了,必须的换行啊

用JQuery帮你写了一个,你看看,选1就显示文本框,选2就消失

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <script type="text/javascript" src="jquery.js"></script>    <script type="text/javascript">        $(function () {                   });        function changeSel() {            if ($("#select1").val() == 2) {                $("#text").addClass("class2");            } else {                $("#text").removeClass("class2");            }        }    </script>    <style type="text/css">        .class2        {           display:none;        }    </style></head><body>    <select id="select1"  name="select" onChange="changeSel()">                 <option value="1">1</option>                 <option value="2">2</option>                    </select>    <input type="text" id="text" name="text"  value="" /></body></html>

尼玛,白做好人了,一分没有,

<select  name="select" onChange="disinput(this)">                <option value="1">1</option>                <option value="2">2</option>                </select><input type="text" id="text" name="text"  value="" /> <script type="text/javascript">	function disinput(obj){		if(obj.value==2){			document.getElementById("text").style.display="none";		}else{document.getElementById("text").style.display="";}	}</script>

如果还原默认的话就可以不换行了,block的话就成块级元素了,必须的换行啊

  - -没办法啊~~你来晚了~~~我以为没人回复了就把帖子结了.
声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn