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 相关文章推荐
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
js改变embed标签src值的方法
Apr 10 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 Javascript
openlayers4实现点动态扩散
Aug 17 Javascript
vue中使用echarts的示例
Jan 03 Vue.js
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模拟SQL Server的两个日期处理函数
2006/10/09 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
PHP7 list() 函数修改
2021/03/09 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
2017/09/12 jQuery
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
pygame学习笔记(5):游戏精灵
2015/04/15 Python
python模拟Django框架实例
2016/05/17 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
用Python shell简化开发
2018/08/08 Python
python安装scipy的方法步骤
2019/06/26 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
详解Java中一维、二维数组在内存中的结构
2021/02/11 Python
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
基于Python 函数和方法的区别说明
2021/03/24 Python
大学应届毕业生个人求职信
2013/09/23 职场文书
咖啡店自主创业商业计划书
2014/01/22 职场文书
甲午风云观后感
2015/06/02 职场文书
债务追讨律师函
2015/06/24 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL