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中的对象 推荐
Jan 09 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 Javascript
vue-cli配置环境变量的方法
Jul 09 Javascript
es6中reduce的基本使用方法
Sep 10 Javascript
微信小程序如何实现在线客服功能
Oct 16 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 SQL之where语句生成器
2009/03/24 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
2017/06/16 Javascript
详解JavaScript的BUG和错误
2018/05/07 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
使用Python对SQLite数据库操作
2017/04/06 Python
Python3中使用PyMongo的方法详解
2017/07/28 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
粉红色的鲸鱼:Vineyard Vines
2018/02/17 全球购物
新电JAVA笔试题目
2014/08/31 面试题
法雷奥SQA(electric)面试问题
2016/01/23 面试题
Java面试笔试题大全
2016/11/23 面试题
中级会计职业生涯规划书
2014/03/01 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
邀请书格式范文
2015/02/02 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
机关工会工作总结2015
2015/05/26 职场文书
转变工作作风心得体会
2016/01/23 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis