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学习笔记7 原型链的原理
Jan 11 Javascript
基于JQuery的简单实现折叠菜单代码
Sep 15 Javascript
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
vue实现动态数据绑定
Apr 28 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
a标签调用js的方法总结
Sep 05 Javascript
vue请求服务器数据后绑定不上的解决方法
Oct 30 Javascript
vue项目出现页面空白的解决方案
Oct 31 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和XSS跨站攻击的防范
2007/04/17 PHP
php定界符
2014/06/19 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
JS查看对象功能代码
2008/04/25 Javascript
javascript 鼠标滚轮事件
2009/04/09 Javascript
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
jQuery版仿Path菜单效果
2011/12/15 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
vue源码入口文件分析(推荐)
2018/01/30 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
Python之文字转图片方法
2018/05/10 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
Python 字典中的所有方法及用法
2020/06/10 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
中专生自荐信
2013/10/12 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
教师个人考察材料
2014/12/16 职场文书
红与黑读书笔记
2015/06/29 职场文书