使用JS对select标签进行联动选择
2017-07-16 20:01
429 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> function checkSelect(xueqi){ var option1,option2; switch (xueqi) { case "第一学期": option1 = new Option("HTML","HTML"); option2 = new Option("Java","Java"); break; case "第二学期": option1 = new Option("Sqlserver","Sqlserver"); option2 = new Option(".Net",".Net"); break; case "第二学年": option1 = new Option("Struts","Structs"); option2 = new Option("Ajax","Ajax"); break; } document.getElementById("subject").length = 1; document.getElementById("subject").options.add(option1); document.getElementById("subject").options.add(option2); } function checkPro(obj){ var arr = new Array(); arr["浙江"] = ["杭州","嘉兴","湖州"]; arr["江苏"] = ["南京","苏州","南通"]; arr["福建"] = ["福州","厦门","福鼎"]; var proValue = obj.value; document.getElementById("city").length = 1; for ( var i in arr[proValue]) { var options; options = new Option(arr[proValue][i],arr[proValue][i]); document.getElementById("city").options.add(options); } } </script> </head> <body> <form method="get" name="jsForm"> <table> <tr> <td>考试申请</td> </tr> <tr> <td> 学期 </td> <td> <select name="xueqi" onchange="checkSelect(this.value)"> <option value="">--请选择学期--</option> <option value="第一学期">第一学期</option> <option value="第一学期">第二学期</option> <option value="第二学年">第二学年</option> </select> </td> </tr> <tr> <td> 课程 </td> <td> <select name="subject" id="subject"> <option value="">--请选择相相应学期的课程--</option> </select> </td> </tr> <tr> <td> 省份: </td> <td> <select name="xueqi" onchange="checkPro(this)"> <option value="" >--请选择省份--</option> <option value="浙江">浙江</option> <option value="江苏">江苏</option> <option value="福建">福建</option> </select> </td> </tr> <tr> <td> 城市: </td> <td> <select name="city" id="city"> <option value="">--请选择相相应省份的城市--</option> </select> </td> </tr> </table> </form> </body> </html> <pre name="code" class="html">checkSelect()方法属于不推荐的 ,可是也能够实现 <pre name="code" class="html">checkPro(obj)推荐使用 而且在 js里面数组下表能够用 汉字来选择,更加easy理解
相关文章推荐
- 使用JS对select标签进行联动选择
- 对于不允许使用开源标签进行select选中的js替代方法
- 使用Jquery-Ajax改变Select标签进行联动
- 使用 js + button标签 模拟 select 列表框 操作 By shawl.qiu
- jquery使用jquerydoubleselectmin.js实现二级菜单联动
- 这是用原声js编写的地址选择器,使用select编写的三联选择器
- JS~对img标签进行优化,使用onerror进行默认图像显示
- 使用JS对HTML标签进行增删改查
- HTML5 audio标签使用js进行播放控制实例
- 在React中实现用select标签进行联动切换效果。
- JS完成注册页面的省市联动(JS内置对象全局函数,select标签操作)
- 服务器控件使用js进行验证(选择地调用后台事件)
- Js选择框脚本 移动操作select 标签中的 option 项的操作事项
- 下拉框使用c:if标签进行判断然后使用selected属性实现选择状态
- JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参(selected的值和页面其它元素的值)以及js的select
- HTML5 audio标签使用js进行播放控制实例
- js简单实现HTML标签Select联动带跳转
- 使用bBank.js解决IE下select标签innerHTML插入option的BUG
- 使用WdatePicker.js显示日期选择控件,并进行设置