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 相关文章推荐
Jquery ui css framework
Jun 28 Javascript
Javascript中的关键字和保留字整理
Oct 16 Javascript
JS实现控制表格行文本对齐的方法
Mar 30 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
BootStrap的两种模态框方式
May 10 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
angular2 组件之间通过service互相传递的实例
Sep 30 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 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 n个不重复的随机数生成代码
2009/06/23 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
解决laravel中日志权限莫名变成了root的问题
2019/10/17 PHP
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
JS实现520 表白简单代码
2018/05/21 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
详解python单例模式与metaclass
2016/01/15 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
Python数据存储之 h5py详解
2019/12/26 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
餐饮部总监岗位职责范文
2014/02/13 职场文书
企业元宵节主持词
2014/03/25 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
家庭贫困证明
2014/09/23 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
龙门石窟导游词
2015/02/02 职场文书
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang