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 相关文章推荐
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
JavaScript实现省市联动效果
Nov 22 Javascript
DWR内存兼容及无法调用问题解决方案
Oct 16 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 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将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
jQuery把表单元素变为json对象
2013/11/06 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
python实现简单socket通信的方法
2016/04/19 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
keras 读取多标签图像数据方式
2020/06/12 Python
使用K.function()调试keras操作
2020/06/17 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
服装促销活动方案
2014/02/23 职场文书
文秘个人求职信范文
2014/04/22 职场文书
毕业生工作求职信
2014/06/30 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
创卫工作总结2015
2015/04/22 职场文书
十八大观后感
2015/06/12 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript