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将iframe中控件的值传到主页面控件中的实现方法
Mar 11 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
简单分析js中的this的原理
Aug 31 Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 Javascript
原生js中运算符及流程控制示例详解
Jan 05 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版(4)
2006/10/09 PHP
用PHP的ob_start();控制您的浏览器cache!
2006/11/25 PHP
PHP初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
关于php内存不够用的快速解决方法
2013/10/26 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
Python的装饰器用法学习笔记
2016/06/24 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
python 爬取马蜂窝景点翻页文字评论的实现
2020/01/20 Python
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
三星美国官网:Samsung美国
2017/02/06 全球购物
财务经理的岗位职责
2013/12/17 职场文书
寒假实习自荐信
2014/01/26 职场文书
我去timi了,一起去timi是什么意思?
2022/04/13 杂记
MySql数据库 查询时间序列间隔
2022/05/11 MySQL
python中使用redis用法详解
2022/12/24 Redis