select组合框option的捕捉实例代码


Posted in Javascript onSeptember 30, 2008

select组合框option的捕捉实例代码

这是一份报名表单,要求用户在选中“专业人士访问员”和“定性访问员”后,分别显示“可提供被访者类型”和“容易接触到的行业”的对应表单。当呈未选中状态时,这2个框也对应的隐藏起来。
html部分

<p> 
<label class="title">报名参加的兼职职位(必填项)<br/>按住Ctrl键可多选</label> 
<select onchange="showEasyVisitBox(this)" size="10" style="width: 200px;" multiple="multiple" id="kc_selectjob" name="kc_selectjob"> 
<option selected="selected" value="入户访问员">入户访问员</option> 
<option value="街访访问员">街访访问员</option> 
<option value="街访拦截员">街访拦截员</option> 
<option value="电话访问员">电话访问员</option> 
<option value="神秘顾客">神秘顾客</option> 
<option value="专业人士访问员">专业人士访问员</option> 
<option value="企业深访员">企业深访员</option> 
<option value="定性联络员">定性联络员</option> 
<option value="主持人">主持人</option> 
<option value="质量控制员">质量控制员</option> 
<option value="数据录入员">数据录入员</option> 
</select> 
</p> 
<p id="supportvisitBox" style="display: none;"> 
<label class="title">可提供被访者类型</label> 
</p> 
<p id="easyvisitBox" style="display: none;"> 
<label class="title">容易接触到的行业</label> 
</p>

javascript部分

option不能定义事件(我没试出来),所以事件要定义在select上。 这里使用的是onchange事件,onchange事件是当对象发生变化时触发,在这里用onchange比onclick合理许多,效果也好。
在调试这个脚本的时候,一开始我是用selectedIndex,试验多次发现selectedIndex在多选的情况下只能捕捉到第一个选中的选项,无法承担多选的工作。查了下参考书,才发现自己走了弯路。

var oListBox = document.getElementById("kc_selectjob"); oListBox.onchange = function showEasyVisitBox(){ 
var oEasyvisitBox = document.getElementById("easyvisitBox"); 
var oSupportvisitBox = document.getElementById("supportvisitBox"); 
if (oListBox.options[5].selected) 
{ 
oEasyvisitBox.style.display = "block"; 
} 
else { 
oEasyvisitBox.style.display = "none"; 
} 
if (oListBox.options[7].selected) 
{ 
oSupportvisitBox.style.display = "block"; 
} 
else { 
oSupportvisitBox.style.display = "none"; 
} 
}

Javascript 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 18 Javascript
javascript 类定义的4种方法
Sep 12 Javascript
js输出列表实现代码
Sep 12 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
js严格模式总结(分享)
Aug 22 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
简单了解three.js 着色器材质
Aug 03 Javascript
javascript优先加载笔记代码
Sep 30 #Javascript
javascript显示隐藏层比较不错的方法分析
Sep 30 #Javascript
javascript不同页面传值的改进版
Sep 30 #Javascript
简明json介绍
Sep 28 #Javascript
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
Sep 27 #Javascript
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 #Javascript
验证用户是否修改过页面的数据的实现方法
Sep 26 #Javascript
You might like
解析wamp5下虚拟机配置文档
2013/06/27 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
JavaScript Timer实现代码
2010/02/17 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
避免jQuery名字冲突 noConflict()方法
2016/07/30 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
js实现一个简易计算器
2020/03/30 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
Python、Javascript中的闭包比较
2015/02/04 Python
Python中AND、OR的一个使用小技巧
2015/02/18 Python
python实现搜索文本文件内容脚本
2018/06/22 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
Django 请求Request的具体使用方法
2019/11/11 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
服务生自我鉴定
2014/01/22 职场文书
《恐龙》教学反思
2014/04/27 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
顶岗实习计划书
2015/01/16 职场文书
求职自我评价怎么写
2015/03/09 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
如何解决.cuda()加载用时很长的问题
2021/05/24 Python