js 使用form表单select类实现级联菜单效果


Posted in Javascript onDecember 19, 2012

用例如下:

<form name="form1" method="POST" action="--WEBBOT-SELF--"> 
<select id="select1" onchange="select1onchange()"> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
</select> 
</form>

我建议要设定每个option的value值,来标示用户在选用时具体是哪一项。
在javascript中使用document.getElementById("select1").value;或者form1.select1.value;
则可得到所选的值是多少。
使用onchange事件,触发条件是select的option值改变。

使用级联菜单时
建立两个select,他们的id分别是select1,select2。
为select1创建触发函数javascript函数,select1onchange(),在此函数中,得到select1的值,
查表得到相对应的select2的值,并为select2添加相应的选项,即可达到级联效果。

<select id="select1" onchange="select1onchange()"> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
</select> 
<select id="select2" onchange="select2onchange()"> 
</select> 
function t1onfocus() 
{ 
document.getElementById("p1").innerHTML="获得焦点"; 
} 
function select1onchange() 
{ 
var i; 
for (i=10;i>=0;i--) 
form1.select2.remove(i); 
var objOption; 
for (i=0;i<=9;i++) 
{ 
objOption=document.createElement("OPTION"); 
objOption.text=form1.select1.value*10+i; 
objOption.value=form1.select1.value*10+i; 
form1.select2.options.add(objOption); 
} 
} 
function select2onchange() 
{ 
p1.innerHTML=form1.select2.value; //p1是文档中用于输出的自定义的项。 
}
Javascript 相关文章推荐
爱恋千雪-US-AscII加密解密工具(网页加密)下载
Jun 06 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
May 25 Javascript
Prototype源码浅析 Number部分
Jan 16 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
JS模拟键盘打字效果的方法
Aug 05 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 Javascript
JS限制上传图片大小不使用控件在本地实现
Dec 19 #Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 #Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 #Javascript
ajax java 实现自动完成功能
Dec 19 #Javascript
JavaScript字符串String和Array操作的有趣方法
Dec 18 #Javascript
学习js在线html(富文本,所见即所得)编辑器
Dec 18 #Javascript
javascript jscroll模拟html元素滚动条
Dec 18 #Javascript
You might like
重料打造自己的“宝马”---第三代
2021/03/02 无线电
PHP读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
JS event使用方法详解
2008/04/28 Javascript
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
JavaScript实现的购物车效果可以运用在好多地方
2014/05/09 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
python和pyqt实现360的CLable控件
2014/02/21 Python
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
python如何重载模块实例解析
2018/01/25 Python
Python2中文处理纪要的实现方法
2018/03/10 Python
Python partial函数原理及用法解析
2019/12/11 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
期末总结的个人自我评价
2013/11/02 职场文书
北京大学自荐信范文
2014/01/28 职场文书
端午节粽子促销活动方案
2014/02/02 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
安全生产承诺书
2014/03/26 职场文书
镇创先争优活动总结
2014/08/28 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书