繁体中文
设为首页
加入收藏
资讯中心
网络编程
数据库
脚本专栏
实用技巧
软件编程
网页制作
操作系统
经典网摘
网站技巧
免费资源
关于我们
文章搜索
主机租用
域名查询
基础知识
应用技巧
表单特效
广告代码
网页特效
黑客性质
页面导航：
首页
→
网络编程
→
JavaScript
→
表单特效
→ 正文内容
动态提示的下拉框
发布：dxy 发布日期：
2006-8-23
字体：[
增加
减小
] 类型：转载
点击运行可以看到效果:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <META content="fason,阿信" name=Author> <title>动态提示的下拉框</title> <style> a{color:red;text-decoration:none;font-size:12px} </style> </head> <body onload="Init()"> <center> <h2>动态提示的下拉框</h2> <hr> <form name=frm> <table> <tr> <td>请输入1或2或3或4或5进行测试： <input name="txt" style="width:100px" onkeyup="SelectTip(0)"> <input type="button" value="reset" onclick="SelectTip(1)"></td> </tr> <tr> <td> <span id="demo"><select name="demo" style="width:100px" size=10 onchange="txt.value=options[selectedIndex].text;"> <option value="1">1</option> <option value="12">12</option> <option value="123">123</option> <option value="1234">1234</option> <option value="2">2</option> <option value="23">23</option> <option value="234">234</option> <option value="2345">2345</option> <option value="3">3</option> <option value="34">34</option> <option value="345">345</option> <option value="3456">3456</option> <option value="5">5</option> <option value="51">51</option> <option value="51w">51w</option> <option value="51wi">51wi</option> <option value="51win">51win</option> <option value="51windows">51windows</option> </select></span> </td> </tr> </form> </table> <hr> <script language="javascript"> var TempArr=[];//存贮option function Init(){ var SelectObj=document.frm.elements["demo"] /*先将数据存入数组*/ with(SelectObj) for(i=0;i<length;i++)TempArr[i]=[options[i].text,options[i].value] } function SelectTip(flag){ var TxtObj=document.frm.elements["txt"] var SelectObj=document.getElementById("demo") var Arr=[] with(SelectObj){ var SelectHTML=innerHTML.match(/<[^>]*>/)[0] for(i=0;i<TempArr.length;i++) if(TempArr[i][0].indexOf(TxtObj.value)==0||flag)//若找到以txt的内容开头的，添option。若flag为true,对下拉框初始化 Arr[Arr.length]="<option value='"+TempArr[i][1]+"'>"+TempArr[i][0]+"</option>" innerHTML=SelectHTML+Arr.join()+"</SELECT>" } } </script> </body>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
Tags：
动态提示的下拉框
百度中搜索更多的关于
动态提示的下拉框
内容，或者
用Google搜索相关更多
浏览次数：
载入中...
打印本文
关闭本文
返回首页
0
顶一下
上一篇文章：
用srcElement实现添加效果
下一篇文章：
javascript+css好多网站用的选星星实现打分功能的函数
文章评论
共有
位脚本之家网友发表了评论
我来说两句
同 类 文 章
form中限制文本字节数js代码
快速判断某个值是否在select中的方法
textarea保留换行的注意事项
使用button标签，实现三态图片按钮
动态改变textbox的宽高的js
javascript之dhDataGrid Ver2.0.0代码
表单填写时用回车代替TAB的实现方法
select发展史 超强
js正则实现的密码框简单制作,还可以替换成
表单提交验证类
最 近 更 新
javascript下阻止表单重复提交、防刷新、
(仅IE下有效)关于checkbox 三态
在textarea输入Tab
用JS输入email的代码,以防垃圾邮件
javascript据option的value值快速设定初始
如何识别上传前检测的图像是有效的方法
得到文本框选中的文字，动态插入文字的js
用javascript来实现select标签的美化的代
用javascript将数据库中的TEXT类型数据动
表单的一些基本用法与技巧
热 点 排 行
checkbox实现全选的多种方法 不断
收藏的js表单验证控制代码大全
HTML里select的CSS样式的改变
改进版：在select中添加、修改、
二级连动菜单
Select的OnChange()事件
javascript判断单选框或复选框是
JS多级连动菜单
多个iframe自动调整大小的问题
把textarea中字符串里含有的回车
文章评论
共有 位脚本之家网友发表了评论我来说两句