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 相关文章推荐
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
Angularjs 实现分页功能及示例代码
Sep 14 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 Javascript
js实现鼠标拖曳效果
Dec 30 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
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
php求数组全排列,元素所有组合的方法总结
2017/03/14 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
动态控制Table的js代码
2007/03/07 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
python tkinter控件布局项目实例
2019/11/04 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
Python列表切片常用操作实例解析
2020/03/10 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
html5时钟实现代码
2010/10/22 HTML / CSS
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
中医药大学毕业生自荐信
2013/11/08 职场文书
21岁生日感言
2014/02/27 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
紫日观后感
2015/06/05 职场文书
OpenCV-Python实现轮廓拟合
2021/06/08 Python