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实现一个TreeMenu效果分享
Aug 28 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
jQuery 限制输入字符串长度
Jun 20 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
关于vue.js发布后路径引用的问题解决
Aug 15 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 Javascript
js实现购物车商品数量加减
Sep 21 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
动易数据转成dedecms的php程序
2007/04/07 PHP
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
node.js中的socket.io的广播消息
2014/12/15 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
jquery显示隐藏元素的实现代码
2016/05/19 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
获取url中用&amp;隔开的参数实例(分享)
2017/05/28 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
Vue弹出菜单功能的实现代码
2018/09/12 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
python开发之文件操作用法实例
2015/11/13 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
Yahoo-PHP面试题4
2012/05/05 面试题
整改落实自查报告
2014/11/05 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
员工离职证明范本
2015/06/12 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript