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中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
Nov 14 Javascript
js获取时间(本周、本季度、本月..)
Nov 22 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
JavaScript实现前端实时搜索功能
Mar 26 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 Javascript
Java Varargs 可变参数用法详解
Jan 28 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
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
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
JS往数组中添加项性能分析
2015/02/25 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
解决wx.onMenuShareTimeline出现的问题
2016/08/16 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
js获取Get值的方法
2016/09/29 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
js实现复选框的全选和取消全选效果
2017/01/03 Javascript
Jquery中attr与prop的区别详解
2017/05/27 jQuery
Webpack执行命令参数详解
2017/06/17 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
Python生成器(Generator)详解
2015/04/13 Python
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
2014年道德讲堂实施方案
2014/03/05 职场文书
文秘档案管理岗位职责
2014/03/06 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
团组织关系介绍信
2019/06/24 职场文书
Python可视化学习之seaborn调色盘
2022/02/24 Python
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android