首页 > web前端 > js教程 > select组合框option的捕捉实例代码_表单特效

select组合框option的捕捉实例代码_表单特效

WBOY
发布: 2016-05-16 19:00:17
原创
1064 人浏览过

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

复制代码 代码如下:









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";
}

}

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板