jquery实现省市select下拉框的替换

 本篇文章主要是对jquery实现省市select下拉框的替换(示例代码)进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

省市对应的实现:<还有一些没封装起来> 
 
更具选择的省份来确定市的内容
 
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);
 });
});
 

时间: 2016-02-24

jquery实现省市select下拉框的替换的相关文章

jquery取消选择select下拉框示例代码

 本篇文章主要是对jquery取消选择select下拉框示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 有三个select下拉框 一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项 这需求有点儿..........   下面是三个select:   代码如下: <select name="pWaqqqy" id="sel_type" onchange="selectFunction()">

jquery取消选择select下拉框示例代码_jquery

有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: 复制代码 代码如下: <select name="pWaqqqy" id="sel_type" onchange="selectFunction()">        <option value="">全部</option>   

jQuery制作简洁的多级联动Select下拉框_jquery

今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这个Select下拉框也可以绑定下拉事件,并获取当前选中项的值. html代码: 复制代码 代码如下:  <div class="wrap">         <div class="nice-select" name="nice-select

jquery动态加载select下拉框示例代码

 动态加载select下拉框的实现方法有很多,在接下来的文章中为大家介绍下jquery是如何实现的 如题,直接上代码,实战学习.  代码如下: <head><title>jquery实现动态加载select下拉选项</title>  <script type="text/javascript">  function init(){  makemoduleSelect();  }  //加载模板下拉框选项  function makemod

用jQuery模拟select下拉框的简单示例代码

 本篇文章主要是对用jQuery模拟select下拉框的简单示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮.这样就只能用 js + div 来模拟了,倒腾了一番,用jQuery模拟了下,当然网上这种文章也不少,只是懒得去看找  代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition

javascript基于DOM实现省市级联下拉框的方法

  本文实例讲述了javascript基于DOM实现省市级联下拉框的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 <html xmlns="http://www.w

jQuery扁平化风格下拉框美化插件FancySelect使用指南

 这篇文章主要介绍了jQuery扁平化风格下拉框美化插件FancySelect使用指南,需要的朋友可以参考下     FancySelect是一款小巧实用的jQuery下拉框美化插件.该下拉框美化插件采用扁平化设计风格,是追求时尚的开发者的首选下拉框美化插件之一. 使用方法 HTML结构 FancySelect实用十分简单,它可以和jQuery或Zepto结合使用.在页面中放置一些 <select> 下拉框组件,然后就可以通过 .fancySelect() 方法来调用该下拉框插件.如果下拉框中

js实现Select下拉框具有输入功能的方法

 这篇文章主要介绍了js实现Select下拉框具有输入功能的方法,实例分析了两种比较常见的实现方法,是非常实用的技巧,需要的朋友可以参考下     本文实例讲述了js实现Select下拉框具有输入功能的方法.分享给大家供大家参考.具体实现方法如下: 实现方法一 代码如下: <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> <TITLE>js实现

JavaScript获取Select下拉框OptionValue和Text值方法

  Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个form表单中的Select下拉框菜单为例,来说明如何用JavaScript获取其Value值和Text值: 示例表单,里面是一个select下拉列表框的各个列表项及值: 接下来是JavaScript部分,获取Select的各个Value值和Text值: