jquery实现省市select下拉框的替换(示例代码)


Posted in Javascript onFebruary 22, 2014

省市对应的实现:<还有一些没封装起来>

更具选择的省份来确定市的内容

jsp代码:

<body>
  省份<select name="prin">
   <option>--请选择--</option>
   <option>福建</option>
   <option>北京</option>
   <option>山东</option>
   <option>上海</option>
    </select>
   县、市<select  id="sel2">
   <option>--请选择--</option>
      </select>  
</body>

js代码:
function appendShi(shi) {//字符串拼接,拼接市区
   var fjs='';
 for(var i=0;i<shi.length;i++)
 {
  fjs += '<option>' + shi[i]+ '</option>';
 }
 return fjs;
}
$(function() {
 var prince = ['福建','北京','山东','上海'];
 var fjs = ['厦门','泉州','福州'];
 var bjs = ['北京','朝阳区','海淀区','平谷区'];
 var shs = ['黄浦区','长宁区','宝山区','嘉定区'];
 var sds = ['济南','青岛','烟台','日照','莱芜','sss']; $("select[name='prin']").change(function() {  
  var shi = $("#sel2");//得到第二个select
  var prin = $("select[name='prin'][select option:selected]");//得到选中的身份的值
  var newShiSel = $('<select id="sel2"><option>--请选择--</option></select>');//
  if (prin.val() == '福建'){
   newShiSel.append(appendShi(fjs));   
  }
  if (prin.val() == '北京') {   
   newShiSel.append(appendShi(bjs));   
  }
  if (prin.val() == '上海') {   
   newShiSel.append(appendShi(shs));   
  }
  if (prin.val() == '山东') {   
   newShiSel.append(appendShi(sds));   
  }
  shi.replaceWith(newShiSel);
 });
});
Javascript 相关文章推荐
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
JS 如果改变span标签的是否隐藏属性
Oct 06 Javascript
获取body标签的两种方法
Oct 13 Javascript
什么是Node.js?Node.js详细介绍
Jun 01 Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 Javascript
简单实现轮播图效果的实例
Jul 15 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
Angular(5.2-&gt;6.1)升级小结
Dec 27 Javascript
javascript实现图片轮换动作方法
Aug 07 Javascript
JS实现简易日历效果
Jan 25 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 #Javascript
jquery取消选择select下拉框示例代码
Feb 22 #Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 #Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 #Javascript
js document.write()使用介绍
Feb 21 #Javascript
jQuery写fadeTo示例代码
Feb 21 #Javascript
iframe父页面获取子页面参数的方法
Feb 21 #Javascript
You might like
PHP 实现判断用户是否手机访问
2015/01/21 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
利用Python爬取可用的代理IP
2016/08/18 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
基于Python解密仿射密码
2019/10/21 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
学习Python列表的基础知识汇总
2020/03/10 Python
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
上课说话检讨书大全
2014/01/22 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
护士长竞聘演讲稿
2014/04/30 职场文书
软件项目实施计划书
2014/05/02 职场文书
员工聘用合同范本
2015/09/21 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
汉语拼音教学反思
2016/02/22 职场文书
高质量“欢迎词”
2019/04/03 职场文书
python中opencv实现图片文本倾斜校正
2021/06/11 Python