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 浮点运算精度问题分析与解决
Mar 26 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 Javascript
Vue.js动态组件解析
Sep 09 Javascript
Vuejs 单文件组件实例详解
Feb 09 Javascript
优化Vue项目编译文件大小的方法步骤
May 27 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 Javascript
vue框架中props的typescript用法详解
Feb 17 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 Javascript
如何用JavaScript检测当前浏览器是无头浏览器
Apr 27 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/01 无线电
PHP 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
PHP实现简单实用的分页类代码
2016/04/08 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
汉语言文学毕业生求职信
2013/10/01 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
院系推荐意见
2015/06/05 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL
JavaScript 反射学习技巧
2021/10/16 Javascript
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android