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 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
Javascript 判断客户端浏览器类型代码
Mar 01 Javascript
javascript中的new使用
Mar 20 Javascript
Jquery中对数组的操作代码
Aug 12 Javascript
javascript中传统事件与现代事件
Jun 23 Javascript
javascript实现简单的进度条
Jul 02 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
浅谈vue的踩坑路
Aug 31 Javascript
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 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之数据库操作详解及乱码解决!
2007/01/02 PHP
header跳转和include包含问题详解
2012/09/08 PHP
PHP curl 获取响应的状态码的方法
2014/01/13 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
php递归函数怎么用才有效
2018/02/24 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
aspx中利用js实现确认删除代码
2010/07/22 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
python九九乘法表的实例
2017/09/26 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
Python提取PDF内容的方法(文本、图像、线条等)
2019/09/25 Python
python能做什么 python的含义
2019/10/12 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
Python排序函数的使用方法详解
2020/12/11 Python
皮姆斯勒语言学习:Pimsleur Language Programs
2018/06/30 全球购物
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
市场部经理岗位职责
2015/02/02 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP