Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
UI
|
输入
|
媒体
|
导航
|
其他
|
网页模板
|
APP模板
|
常用代码
|
在线代码
背景
对话框和灯箱
筛选及排序
反馈
弹出层
悬停
布局
图表
加载
圆边
滚动
标签
文本链接
工具提示
网络类型
拾色器
定制和风格
日期和时间
拖和放
通用输入
自动完成
密码
投票率
搜索
选择框
快捷键
触摸
丰富的输入
上传
验证
音频和视频
幻灯片和轮播图
图片展示
图像
地图
滑块和旋转
Tabs
水平导航
垂直导航
文件树
分页
手风琴菜单
其他导航
动画效果
浏览器调整
移动
独立的部件
杂项
游戏
PROMULGATOR
空折枝
湖南省株洲市
关注作者
(1)
收藏此代码
(117)
← jquery上传预览
→ js多图片展开收缩
相关代码
三级
联动
省份
简单的
下拉
框
三级
联动
jQuery
三级
联动
jQuery省市区多级
联动
jQ省市区
三级
联动
联动
下拉
框
代码
js
下拉
框
二级
联动
Html
Css
Js
-请选择-
-请选择-
-请选择-
var osheng = document.getElementById("sheng"); var oshi = document.getElementById("shi"); var oxian = document.getElementById("xian"); var arr_sheng = ["陕西省", "云南省", "四川省", "山西省"]; var arr_shi = [ ["西安市", "咸阳市", "宝鸡市", "渭南市"], ["昆明市", "大理市", "丽江市", "西双版纳市"], ["乐山市", "成都市", "大同市", "高新市"], ["太原市", "屏显市", "乐宝市", "李伟市"] ]; var arr_xian = [ [ ["西安县1", "西安县2"], ["咸阳市1", "咸阳市2"], ["宝鸡市1", "宝鸡市2"], ["渭南市1", "渭南市2"] ], [ ["昆明市1", "昆明市2"], ["大理市1", "大理市2"], ["丽江市1", "丽江市2"], ["西双版纳市1", "西双版纳市2"] ], [ ["乐山市1", "乐山市2"], ["成都市1", "成都市2"], ["大同市1", "大同市2"], ["高新市1", "高新市2"] ], [ ["太原市1", "太原市2"], ["屏显市1", "屏显市2"], ["乐宝市1", "乐宝市2"], ["李伟市1", "李伟市2"] ] ]; var quanju_arr; //创建一个全局对象,用于存储一个中间数组 function input_arr(arr, event) { //封装一个函数,用于向下拉栏中添加元素 for (var i = 0; i < arr.length; i++) { //下拉栏内的元素来源于数组中的元素,遍历数组 var option = new Option(arr[i], i); //创建Option对象(这个O要大写),存入值 event.appendChild(option); //把option添加到event对象的末尾 } } input_arr(arr_sheng, osheng); //调用,给省下拉栏添元素 osheng.onchange = function() { //给下拉栏绑定事件(当下拉栏元素改变时执行) oshi.options.length = 1; //当省下拉栏改变时,清空市的下拉栏内元素 oxian.options.length = 1; //当省下拉栏改变时,清空县的下拉栏内元素 var index = this.value; //每一个option标签都有一个value值索引,获取索引,用于数组中元素的选择 var arr_shi_next = arr_shi[index]; //获取当前选择省的市元素并赋给一个数组 quanju_arr = arr_xian[index]; //获取当前选择省中市的县元素并赋给定义的中间数组 input_arr(arr_shi_next, oshi); //调用,给市下拉栏添元素 } oshi.onchange = function() { oxian.options.length = 1; var index = this.value; var arr_xian_next = quanju_arr[index]; input_arr(arr_xian_next, oxian); //调用,给县下拉栏添元素 }
↑上面代码改变,会自动显示代码结果 jQuery调用版本:
1.11.3
立即下载
三级联动省份
代码描述:js省份三级联动
我感觉还行
0
最新
发表评论
全部评论
暂时没有评论!
登录后才可以评论
30秒后在评论吧!
发表评论
回复
取消回复
<!doctype html> <html> <head> <meta charset="utf-8"> <title>三级联动省份-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号