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 相关文章推荐
javascript下给元素添加事件的方法与代码
Aug 13 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
jquery 无限级联菜单案例分享
Mar 26 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
Vue中使用vux的配置详解
May 05 Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
js微信分享接口调用详解
Jul 23 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
一个取得文件扩展名的函数
2006/10/09 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
php代码收集表单内容并写入文件的代码
2012/01/29 PHP
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
javascript function、指针及内置对象
2009/02/19 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
javascript中Math.random()使用详解
2015/04/15 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
走进AngularJs之过滤器(filter)详解
2017/02/17 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
Python字符串和字典相关操作的实例详解
2017/09/23 Python
Python 获取项目根路径的代码
2019/09/27 Python
pycharm如何实现跨目录调用文件
2020/02/28 Python
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
心理学专业毕业生推荐信范文
2013/11/21 职场文书
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
土地转让协议书
2014/04/15 职场文书
3的组成教学反思
2014/04/30 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
颐和园导游词
2015/01/30 职场文书
应急管理工作总结2015
2015/05/04 职场文书
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers