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 相关文章推荐
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
javascript 字符串连接的性能问题(多浏览器)
Nov 18 Javascript
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 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/01 无线电
PHP发送邮件确认验证注册功能示例【修改别人邮件类】
2019/11/09 PHP
sina的lightbox效果。
2007/01/09 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
python正则表达式re模块详细介绍
2014/05/29 Python
Python入门_条件控制(详解)
2017/05/16 Python
简单学习Python多进程Multiprocessing
2017/08/29 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
python使用zip将list转为json的方法
2018/12/31 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
Python之字典添加元素的几种方法
2020/09/30 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
高中生自我评价个人范文
2013/11/09 职场文书
师范应届毕业生自荐信
2013/11/18 职场文书
办公室前台岗位职责范本
2013/12/10 职场文书
春季运动会广播稿大全
2014/02/19 职场文书
学校学习雷锋活动总结
2014/07/03 职场文书
人力资源管理专业自荐书
2014/07/07 职场文书
写给女朋友的保证书
2015/05/09 职场文书
用人单位聘用意向书
2015/05/11 职场文书
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android