Home >Web Front-end >HTML Tutorial >About changing text box attributes in HTML drop-down list_html/css_WEB-ITnose
About changing text box attributes in HTML drop-down list_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:57:011461browse
For example 12a8fd53f9e18a39364d165ed190ee7d
;24afa15d3069109ac30911f04c56f3338
When the drop-down box is selected 2, the text box is hidden and the style attribute is="display:none". I have tried many methods but it works. Is it not possible to change the value of style?
Reply to discussion (solution)
<select name="select" onChange="disinput(this)"> <option value="1">1</option> <option value="2">2</option> </select> <input type="text" id="text" name="text" style="" 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> This can indeed be achieved, But when it is displayed, the text box will change to the next line.... Is there a way to solve this problem? 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" style="" 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> If you restore the default, you can not wrap the line. If it is a block, it will become a block-level element, and line breaks are necessary
<select name="select" onChange="disinput(this)"> <option value="1">1</option> <option value="2">2</option> </select><input type="text" id="text" name="text" style="" 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> I wrote one for you using JQuery. Take a look, select 1 to display the text box, and select 2 to disappear
Damn, you’ve been a good person for nothing, you won’t get a cent.
<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" style="" value="" /></body></html>
If you restore the default, you don’t need to wrap the line. If you block, It’s a block-level element, so line breaks are necessary
- - I can’t help it~~ You’re late~~~ I thought no one would reply, so I ended the post.
<select name="select" onChange="disinput(this)"> <option value="1">1</option> <option value="2">2</option> </select><input type="text" id="text" name="text" style="" 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>