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 相关文章推荐
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
JavaScript之IE的fireEvent方法详细解析
Nov 20 Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
详解Bootstrap插件
Apr 25 Javascript
Augularjs-起步详解
Jul 08 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 Javascript
JavaScript数组及常见操作方法小结
Nov 13 Javascript
javascript实现雪花飘落效果
Aug 19 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
Ajax PHP分页演示
2007/01/02 PHP
php开发工具之vs2005图解
2008/01/12 PHP
php判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
jQuery Ajax文件上传(php)
2009/06/16 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
python 把数据 json格式输出的实例代码
2016/10/31 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
pandas删除指定行详解
2019/04/04 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
毕业生教师求职信
2013/10/20 职场文书
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
学生实习介绍信
2014/01/15 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
学校与家长安全责任书
2014/07/23 职场文书
我的中国梦演讲稿高中篇
2014/08/19 职场文书
2015年基层党建工作总结
2015/05/14 职场文书