使用jQuery实现select级联效果
2014-10-28 17:15
489 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript"> $(function(){ var anhui_city = ["合肥", "芜湖", "蚌埠"]; var hebei_city = ["北京", "燕郊"]; var shandong_city = ["济南", "青岛"]; $("select[name='province']").change(function() { //被选中的option var selected_value = $(this).val(); if(selected_value == "select"){ $("select[name='city']").empty(); }else if(selected_value == "anhui"){ //安徽 $("select[name='city']").empty(); //循环添加 for(var i = 0; i < anhui_city.length; i++) { var option = $("<option>").val(anhui_city[i]).text(anhui_city[i]); $("select[name='city']").append(option); } }else if(selected_value == "hebei"){ //河北 $("select[name='city']").empty(); //循环添加 for(var i = 0; i < hebei_city.length; i++) { var option = $("<option>").val(hebei_city[i]).text(hebei_city[i]); $("select[name='city']").append(option); } }else if(selected_value == "shandong"){ //山东 $("select[name='city']").empty(); //循环添加 for(var i = 0; i < shandong_city.length; i++) { var option = $("<option>").val(shandong_city[i]).text(shandong_city[i]); $("select[name='city']").append(option); } } }); }); </script> </head> <body> <select id="province" name="province"> <option value="select">请选择..</option> <option value="anhui">安徽</option> <option value="hebei">河北</option> <option value="shandong">山东</option> </select> <select name="city"> </select> </body> </html>
相关文章推荐
- 使用jquery JSON Handler实现级联效果
- [C#]使用 C# 代码实现拓扑排序 dotNet Core WEB程序使用 Nginx反向代理 C#里面获得应用程序的当前路径 关于Nginx设置端口号,在Asp.net 获取不到的,解决办法 .Net程序员 初学Ubuntu ,配置Nignix 夜深了,写了个JQuery的省市区三级级联效果
- js 使用form表单select类实现级联菜单效果
- js 使用form表单select类实现级联菜单效果
- 使用jquery和json实现系部与班级的级联
- 使用jQuery实现DIV弹出效果
- jQuery实现select下拉框样式美化效果
- 使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果
- 使用jQuery实现点评星星效果
- Asp.net使用JQuery实现放大图片效果
- jquery imgareaselect 使用利用js与程序结合实现图片剪切
- jquery使用div实现滚动条效果
- 使用HTML5和jQuery插件Reel实现一个超酷的星际争霸2兵种动画360度预览效果
- 使用JQuery实现Edit in place效果的Input框
- 使用Jquery+CSS实现的表格隔行凸显和当前行高亮效果
- 使用jQuery实现AJAX帐号验证效果
- Asp.net使用JQuery实现评论的无刷新分页及分段延迟加载效果