简单模拟下拉组合框

王朝html/css/js·作者佚名  2006-12-17
窄屏简体版  字體: |||超大  

简单模拟下拉组合框

简单模拟下拉组合框

简单模拟下拉组合框

-- Sailflying

Sailflying(车仔)原创,版权所有,如需使用,请与我联系( sailflying@163.net )

动机: 文章发布系统中,在后台的输入界面中需要将输入的文章归档,这时需要输入文章所属类型。当类型数目巨大时,即使是熟悉所有类型的人员,在操作中也容易错输、误输。而且在数据库中一旦查不到这个输入值的话,就会自动增加一个新的类型。 这就需要在输入的时候有个备用查询,并且还能够自动输入。这样可以减轻录入人员的工作量,同时减少错输、误输的几率。 针对这种出现次数较多而且这项功能可以通用到其他众多模块,因此添加了这个模拟功能。 材料: 表单域 (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>

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

有哪位高手知道如何修进的话,请一定通知我。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航