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 核心函数以及jQuery对象
Mar 23 Javascript
基于jquery用于查询操作的实现代码
May 10 Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
May 15 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
jQuery.Callbacks()回调函数队列用法详解
Jun 14 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 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提交过来的数据生成为txt文件
2016/04/28 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
splice slice区别
2006/10/09 Javascript
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
js使用formData实现批量上传
2020/03/27 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
python实现扫雷游戏
2020/03/03 Python
python中altair可视化库实例用法
2021/01/26 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
大学生收银员求职信分享
2014/01/02 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
小组名称和口号
2014/06/09 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
讲文明倡议书
2015/04/29 职场文书
家庭贫困证明
2015/06/16 职场文书
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python