根据选择不同的下拉值出现相对应的文本输入框

更新时间：2013年08月01日 15:17:35 作者：

根据用户选择不同的下拉值，出现相应的文本输入框，在某些情况下比较实用，本文为大家写了个，有需求的朋友可以参考下

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">; 
<html xmlns="http://www.w3.org/1999/xhtml">; 
<head> 
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 
<%@taglib prefix="s" uri="/struts-tags"%> 
<title>无标题文档</title> 
<script language="javascript"> 
function $(obj){return document.getElementById(obj);} 
function show(objid) {$(objid).style.display='inline';} 
function hidden(objid) {$(objid).style.display='none';} 
function doit(){ 
var sel_val=$('sel').value; 
if (sel_val=='') {hidden('a1');hidden('a2');} 
if (sel_val==0) {hidden('a1');hidden('a2');} 
if (sel_val==1) {show('a1');hidden('a2');} 
if (sel_val==2) {show('a2');hidden('a1');} 
} 
</script> 
</head> 

<body> 
<select name="sel" id="sel" onchange="javascript:doit();"> 
<option selected="selected">请选择</option> 
<option value="0">不要输入框</option> 
<option value="1">输入框1</option> 
<option value="2">输入框2</option> 
</select> 

<input value="输入框1" type="text" name="a1" id="a1" style="display:none;" /> 
<input value="输入框2" type="text" name="a2" id="a2" style="display:none;" /> 
<br /> 
<br /> 
</body> 
</html> 

js的with语句使用方法
js的with语句使用方法...
2007-09-09
Bootstrap模态对话框的简单使用
这篇文章主要为大家详细介绍了Bootstrap模态对话框的简单使用，感兴趣的小伙伴们可以参考一下
2016-04-04
JavaScript常见继承模式实例小结
这篇文章主要介绍了JavaScript常见继承模式,结合实例形式总结分析了javascript原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承等相关实现技巧与操作注意事项,需要的朋友可以参考下
2019-01-01
alert和confirm功能介绍
这篇文章主要为大家介绍了alert和confirm的功能,需要的朋友可以参考下
2014-05-05
js调试工具Console命令详解
这篇文章主要介绍了js调试工具Console命令详解,需要的朋友可以参考下
2014-10-10
javascript读取本地文件和目录方法详解
这篇文章主要介绍了javascript读取本地文件和目录方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-08-08
简单实用的js调试logger组件实现代码
开发js组件的时间调试总是麻烦的，最常用的就是用alert或者debugger来测试js的运行状态。
2010-11-11
ES6 javascript中class静态方法、属性与实例属性用法示例
这篇文章主要介绍了ES6 javascript中class静态方法、属性与实例属性用法,结合实例形式分析了ES6中类的静态方法、静态属性概念、功能、使用方法与相关注意事项,需要的朋友可以参考下
2017-10-10
移动端网页开发调试神器Eruda的介绍与使用技巧
在日常的移动端开发时，一般都是试用chrome浏览器的移动端模式进行开发和调试，只有在chrome调试完成，而最近发现了一个新的调试方法，所以这篇文章主要给大家介绍了关于移动端网页开发调试神器Eruda的基本资料，以及其使用的一些技巧，需要的朋友可以参考下。
2017-10-10
动态加载js和css(外部文件)
本文详细介绍下，如何动态加载外部js文件及js；动态加载外部css样式及css样式，感兴趣的朋友可以参考下哈，希望对你学习js有所帮助
2013-04-04