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 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 Javascript
JavaScript入门教程 Cookies
Jan 31 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
Mar 01 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
Javascript Objects详解
Sep 04 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
浅谈Vue.use的使用
Aug 29 Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 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
咖啡的植物学知识
2021/03/03 咖啡文化
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
jquery事件与函数的使用介绍
2013/09/29 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
python处理xml文件的方法小结
2017/05/02 Python
python 删除非空文件夹的实例
2018/04/26 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
GDAL 矢量属性数据修改方式(python)
2020/03/10 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python