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 相关文章推荐
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
div模拟滚动条效果示例代码
Oct 16 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
jquery 正整数数字校验正则表达式
Jan 10 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
js实现简单模态框实例
Nov 16 Javascript
vue 组件开发原理与实现方法详解
Nov 29 Javascript
jQuery实现简单弹幕制作
Dec 10 jQuery
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 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中smarty区域循环的方法
2015/06/11 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
2017/03/15 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
动手学习无线电
2021/03/10 无线电
一个JS的日期格式化算法示例
2013/07/31 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
JavaScript设计模式之外观模式实例
2014/10/10 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
详解javascript高级定时器
2015/12/31 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
Python冲顶大会 快来答题!
2018/01/17 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
python实现求特征选择的信息增益
2018/12/18 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
python自动生成sql语句的脚本
2021/02/24 Python
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
如何手工释放资源
2013/12/15 面试题
节约用电标语
2014/06/17 职场文书
七一建党节慰问信
2015/02/14 职场文书
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫
nginx七层负载均衡配置详解
2022/07/15 Servers