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 相关文章推荐
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
把input初始值不写value的具体实现方法
Jul 04 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
查找页面中所有类为test的结点的方法
Mar 28 Javascript
详解JS函数重载
Dec 04 Javascript
jquery中键盘事件小结
Feb 24 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
Angular的$http与$location
Dec 26 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 Javascript
微信小程序实现tab切换效果
Nov 21 Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
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
使用Apache的rewrite技术
2006/06/22 PHP
如何删除多级目录
2006/10/09 PHP
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
2020/05/22 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
Python采集腾讯新闻实例
2014/07/10 Python
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
Python各种扩展名区别点整理
2020/02/27 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
视光学专业毕业生推荐信
2013/10/28 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL