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实现打开本地文件或文件夹
Mar 09 Javascript
asp 的 分词实现代码
May 24 Javascript
分享十五个最佳jQuery 幻灯插件和教程
Mar 27 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
Aug 03 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
Vue.js路由实现选项卡简单实例
Jul 24 Javascript
Vue操作Storage本地化存储
Apr 29 Vue.js
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通用防注入程序 推荐
2011/02/26 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
javascript显示系统当前时间代码
2016/12/29 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
详解jQuery获取特殊属性的值以及设置内容
2018/11/14 jQuery
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
JS如何生成随机验证码
2020/03/02 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
Python入门学习指南分享
2018/04/11 Python
Python单元测试简单示例
2018/07/03 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
django如何实现视图重定向
2019/07/24 Python
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
个人评价范文分享
2014/01/11 职场文书
致百米运动员广播稿
2014/01/29 职场文书
售后服务经理岗位职责
2014/02/25 职场文书
机械专业技术员求职信
2014/06/14 职场文书
通信工程求职信
2014/07/16 职场文书
销售代理协议书
2014/09/30 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python