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 相关文章推荐
JavaScript 开发中规范性的一点感想
Jun 23 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
JavaScript动态修改网页元素内容的方法
Mar 21 Javascript
使用纯javascript实现经典扫雷游戏
Apr 23 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
在Vue中获取组件声明时的name属性方法
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
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
PHP传参之传值与传址的区别
2015/04/24 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
2011/07/31 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
Bootstrap精简教程
2015/11/27 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
深入理解Python中字典的键的使用
2015/08/19 Python
Python实现递归遍历文件夹并删除文件
2016/04/18 Python
node.js获取参数的常用方法(总结)
2017/05/29 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
Python常用模块logging——日志输出功能(示例代码)
2019/11/20 Python
Python列表如何更新值
2020/05/27 Python
土木工程专业个人求职信
2013/12/05 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
Python字典的基础操作
2021/11/01 Python
python单向链表实例详解
2022/05/25 Python
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python