select下拉选项显示不同的文本框

快乐打工仔 分类:实例代码

select下拉选项显示不同的文本框属于前端实例代码,有关更多实例代码大家可以查看

在实际应用中,可能需要根据不同的select下拉菜单选项,来显示不同的文本框。

当然未必是显示文本框,或者显示其他的内容。

下面简单介绍一下如何实现此效果。

代码实例如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>根本不同的select下拉选项显示不同的文本框-犀牛前端部落</title>
<style type="text/css">
input{display:none}
</style>
<script type="text/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('textOne');
    hidden('textTwo');
  } 
  if(sel_val==0){
    hidden('textOne');
    hidden('textTwo');
  } 
  if(sel_val==1){
    show('textOne');hidden('textTwo');
  } 
  if(sel_val==2){
    show('textTwo');hidden('textOne');
  } 
} 
window.onload=function(){
  var sel=document.getElementById("sel");
  sel.onchange=doit;
}
</script> 
</head>
<body> 
<select name="sel" id="sel"> 
  <option selected="selected">--请选择--</option> 
  <option value="0">隐藏文本框</option> 
  <option value="1">显示文本框一</option> 
  <option value="2">显示文本框二</option> 
</select> 
<input value="文本框一" type="text" id="textOne"/> 
<input value="文本框二" type="text" id="textTwo" /> 
</body> 
</html>

当选择select下拉菜单不同选项时,能够出现不同的文本框,下面就介绍一下实现过程。

一.代码注释:

(1).function $(obj){return document.getElementById(obj);} 此函数类似于jquery的id选择器,可以返回指定id属性值的对象。

(2).function show(objid) {$(objid).style.display='inline';},此函数可以设置指定id属性值元素的显示。

(3). function hidden(objid){$(objid).style.display='none';},此函数可以设置指定id属性值元素的隐藏。

(4).function doit(){},onchange事件处理函数。

(5).var sel_val=$('sel').value,获取选中的option选项的value属性值。

(6).if(sel_val==''),如果属性值为空。

(7).hidden('textOne'),hidden('textTwo'),隐藏两个文本框。

(8).if(sel_val==0) ,如果属性值为0,同样隐藏两个文本框。

(9).if(sel_val==1) {show('textOne');hidden('textTwo');},如果选中第二个选项,显示第一个文本框,隐藏第二个。

(10).if(sel_val==2) {show('textTwo');hidden('textOne');},和上面同样的道理。

(11).window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。

(12).var sel=document.getElementById("sel"),获取select下拉菜单对象。

(13).sel.onchange=doit,注册事件处理函数。

二.相关阅读:

(1).window.onload参阅window.onload 事件一章节。

(2).onchange事件参阅JavaScript change事件一章节。

select下拉选项显示不同的文本框,这样的场景在实际项目中还是用的比较多的,关于select下拉选项显示不同的文本框就介绍到这了。

回复

我来回复
  • 暂无回复内容