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设置和获取HTML、文本和值示例
Jul 08 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
Nov 10 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
jQuery操作属性和样式详解
Apr 13 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 Javascript
Angular的MVC和作用域
Dec 26 Javascript
JavaScript实现分页效果
Mar 28 Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
前端路由&amp;webpack基础配置详解
Jun 10 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具体实现代码
2010/10/12 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
js获取内联样式的方法
2015/01/27 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
基于Vue过渡状态实例讲解
2017/09/14 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
python常用知识梳理(必看篇)
2017/03/23 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
Python Matplotlib库安装与基本作图示例
2019/01/09 Python
pandas分区间,算频率的实例
2019/07/04 Python
python正则-re的用法详解
2019/07/28 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
详解python环境安装selenium和手动下载安装selenium的方法
2020/03/17 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
香港通票:Hong Kong Pass
2019/02/26 全球购物
室内设计实习自我鉴定
2013/09/25 职场文书
学习保证书范文
2014/04/30 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
根叔历年演讲稿
2014/05/20 职场文书
红与黑读书笔记
2015/06/29 职场文书
SQL写法--行行比较
2021/08/23 SQL Server