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 相关文章推荐
javascript中的prototype属性使用说明(函数功能扩展)
Aug 16 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 Javascript
JS实现图片横向滚动效果示例代码
Sep 04 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 Javascript
jQuery的remove()方法使用详解
Aug 11 Javascript
JS实现弹性漂浮效果的广告代码
Sep 02 Javascript
纯javascript版日历控件
Nov 24 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
JS实现换肤功能的方法实例详解
Jan 30 Javascript
webpack的tree shaking的实现方法
Sep 18 Javascript
JS实现网页烟花动画效果
Mar 10 Javascript
vue3.0搭配.net core实现文件上传组件
Oct 29 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代码
2016/08/08 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
Vue表单实例代码
2016/09/05 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
了解JavaScript表单操作和表单域
2019/05/27 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
Python获取脚本所在目录的正确方法
2014/04/15 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
python代码编写计算器小程序
2020/03/30 Python
python如何将两个txt文件内容合并
2019/10/18 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
python实现查找所有程序的安装信息
2020/02/18 Python
曼城官方网上商店:Manchester City
2019/09/10 全球购物
党员教师工作决心书
2014/03/13 职场文书
土地转让协议书范本
2014/04/15 职场文书
安全例会汇报材料
2014/08/23 职场文书
买房协议书范本
2014/10/23 职场文书
场地使用证明模板
2014/10/25 职场文书
民事和解协议书格式
2014/11/29 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
学习经验交流会总结
2015/11/02 职场文书
SpringBoot整合JWT的入门指南
2021/06/29 Java/Android