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 相关文章推荐
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
把普通对象转换成json格式的对象的简单实例
Jul 04 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
利用js+css+html实现固定table的列头不动
Dec 08 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
vue el-table实现行内编辑功能
Dec 11 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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
基于mysql的bbs设计(四)
2006/10/09 PHP
php array_slice函数的使用以及参数详解
2008/08/30 PHP
PHP在线生成二维码(google api)的实现代码详解
2013/06/04 PHP
php多任务程序实例解析
2014/07/19 PHP
万能的php分页类
2017/07/06 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
IE8 浏览器Cookie的处理
2009/01/31 Javascript
jquery的index方法实现tab效果
2011/02/16 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
javascript html5移动端轻松实现文件上传
2020/03/27 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
Python使用requests发送POST请求实例代码
2018/01/25 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
Python集合操作方法详解
2020/02/09 Python
python安装后的目录在哪里
2020/06/21 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
飞机制造技术专业求职信
2014/07/27 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
学校中秋节活动总结
2015/03/23 职场文书
幼儿园工作总结2015
2015/04/01 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技