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 对象介绍
Jan 20 Javascript
在Python中使用glob模块查找文件路径的方法
Jun 17 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
Vue.js仿Metronic高级表格(一)静态设计
Apr 17 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
JavaScript实现动态留言板
Mar 16 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
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
Protoss热键控制
2020/03/14 星际争霸
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
利用Javascript实现BMI计算器
2016/08/16 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
详解Django rest_framework实现RESTful API
2018/05/24 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
Python多线程thread及模块使用实例
2020/04/28 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
设计师珠宝:Ylang 23
2018/05/11 全球购物
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
Hotels.com印度:酒店预订
2019/05/11 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
运动会获奖感言
2014/02/11 职场文书
六查六看六改心得体会
2014/10/14 职场文书
优秀团支部申报材料
2014/12/26 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
Java实现多线程聊天室
2021/06/26 Java/Android
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript