|
简单模拟下拉组合框
|
--- 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> |
- 后记：
- 我在这里只作出了一个能够完成功能的雏形，在动态转换的时候还是有偏移，另一个就是文本框和下拉框之间的间隙太大，我通过样式表控制后情况也还存在。
有哪位高手知道如何修进的话，请一定通知我。
|