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 相关文章推荐
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
跟我学习javascript的循环
Nov 18 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
正则表达式替换html元素属性的方法
Nov 26 Javascript
Angularjs使用指令做表单校验的方法
Mar 31 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
React生命周期原理与用法踩坑笔记
Apr 28 Javascript
JS实现扫雷项目总结
May 19 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出错界面
2006/10/09 PHP
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
js或css实现滚动广告的几种方案
2010/01/28 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
JS对日期操作封装代码实例
2019/11/08 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
Python读取csv文件分隔符设置方法
2019/01/14 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
经典c++面试题二
2015/08/14 面试题
C#面试常见问题
2013/02/25 面试题
安全生产先进个人材料
2014/02/06 职场文书
考试作弊检讨书大全
2014/02/18 职场文书
《三亚落日》教学反思
2014/04/26 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang
Python 统计序列中元素的出现频度
2022/04/26 Python