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 相关文章推荐
更正确的asp冒泡排序
May 24 Javascript
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
Dec 02 Javascript
window.location.hash 使用说明
Nov 08 Javascript
浅谈Javascript鼠标和滚轮事件
Jun 27 Javascript
jquery 删除cookie失效的解决方法
Nov 12 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
JavaScript之Vue.js【入门基础】
Dec 06 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
Angular弹出模态框的两种方式
Oct 19 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
js实现日历
Nov 07 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
PHP4实际应用经验篇(8)
2006/10/09 PHP
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
微信小程序如何实现点击图片放大功能
2020/01/21 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
js实现弹幕飞机效果
2020/08/27 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
python Scrapy框架原理解析
2021/01/04 Python
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
美国眼镜网:GlassesUSA
2017/09/07 全球购物
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
护士求职自荐信范文
2014/03/19 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
商场周年庆活动方案
2014/08/19 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
酒店端午节活动方案
2014/08/26 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
寒假致家长的一封信
2015/10/10 职场文书
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电