简单模拟下拉组合框



简单模拟下拉组合框

  Sailflying (车仔)--  2001/03/28


动机:  
文章发布系统中,在后台的输入界面中需要将输入的文章归档,
这时需要输入文章所属类型。当类型数目巨大时,
即使是熟悉所有类型的人员,在操作中也容易错输、误输。
而且在数据库中一旦查不到这个输入值的话,就会自动增加一个新的类型。  

这就需要在输入的时候有个备用查询,并且还能够自动输入。
这样可以减轻录入人员的工作量,同时减少错输、误输的几率。  

针对这种出现次数较多而且这项功能可以通用到其他众多模块,
因此添加了这个模拟功能。  

材料:  
表单域      (form_name)  
文本框      (textfield_name)  
下拉列表框  (select_name)  

思路:  
1)在文本框中可以输入数值;同时又可以从列表中选择已经存在的备用值  
2)需要将下拉列表框中选中的值传给文本框,并显示出来  
3)动态改变文本框和下拉列表框的宽度,以满足输入和选择之间的需求方式  
  
效果:   
浏览这里


代码:  

自定义函数:ShowToText (将列表项中的值传递给文本框)   
程序代码 程序代码

function ShowToText(){ document.form_name.textfield_name.value=document.form_name.select_name.options[document.form_name.select_name.selectedIndex].value  
}



自定义函数:ChangeWidth (动态改变文本框和下拉框的宽度,num为状态切换的判断参数)

程序代码 程序代码


function ChangeWidth(num){  
if (num==1){  
eval(document.form_name.textfield_name.style.width=0);  
eval(document.form_name.select_name.style.width=180);}  
else {  
eval(document.form_name.textfield_name.style.width=160);  
eval(document.form_name.select_name.style.width=20);}  
}  



表单源码

程序代码 程序代码


<form name="form_name" >  
<input type="text" name="textfield_name" style="width: 160" >  
<select name="select_name" style="width:20"
onChange="ShowToText();ChangeWidth(2)"
onMouseMove="ChangeWidth(1)" onBlur="ChangeWidth(2)" >  
<option value="车仔手札"> 车仔手札 </option>  
<option value="蓝色经典"> 蓝色经典 </option>  
<option value="织梦地带"> 织梦地带 </option>  
<option value="联盟论坛"> 联盟论坛 </option>  
<option value="无忧脚本"> 无忧脚本 </option>  
</form>    



后记:  
我在这里只作出了一个能够完成功能的雏形,在动态转换的时候还是有偏移,
另一个就是文本框和下拉框之间的间隙太大,我通过样式表控制后情况也还存在。  
有哪位高手知道如何修进的话,请一定通知我。    



简单模拟下拉组合框(新解)

HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


[本日志由 饭娃 于 2007-03-31 11:42 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: 深圳 电脑 编程
相关日志:
评论: 0 | 引用: 0 | 查看次数: 3707
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 500 字 | UBB代码 关闭 | [img]标签 关闭