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弹出层类代码分享
Dec 27 Javascript
js性能优化技巧
Nov 29 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
Aug 08 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
vue中component组件的props使用详解
Sep 04 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
vue实现多级菜单效果
Oct 19 Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
PHP时间函数使用详解
2019/03/21 PHP
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
Python request操作步骤及代码实例
2020/04/13 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
请介绍一下WSDL的文档结构
2013/03/17 面试题
决心书标准格式
2014/03/11 职场文书
国际贸易实训报告
2014/11/05 职场文书
顶岗实习协议书
2015/01/29 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
logback 实现给变量指定默认值
2021/08/30 Java/Android
php解析非标准json、非规范json的方式实例
2022/05/10 PHP