jq中实现2级联动

最新推荐文章于 2023-05-27 23:48:40 发布

彻夜不归

最新推荐文章于 2023-05-27 23:48:40 发布

阅读量908

点赞数

分类专栏： pc

pc 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

   <!DOCTYPE html> 
 
   < 
  html 
  lang= 
  "en"> 
 
   < 
  head> 
 
   < 
  meta 
  charset= 
  "UTF-8"> 
 
   < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0"> 
 
   < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge"> 
 
   < 
  title>Document</ 
  title> 
 
   < 
  script 
  src= 
  "https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></ 
  script> 
 
   </ 
  head> 
 
   < 
  body> 
 
   < 
  div 
  class= 
  "selectedCatTop"> 
 
   < 
  select 
  name= 
  "" 
  id= 
  "" 
  class= 
  "category-top"> 
 
   </ 
  select> 
 
   </ 
  div> 
 
   < 
  div 
  class= 
  "selectChild"> 
 
   < 
  select 
  name= 
  "" 
  id= 
  " " 
  class= 
  "category-child"> 
 
   < 
  option 
  value= 
  "">请选择</ 
  option> 
 
   </ 
  select> 
 
   </ 
  div> 
 
   </ 
  body> 
 
   </ 
  html> 
 
   < 
  script> 
 
  var options 
  = 
  $( 
  ".test option:selected"); 
  //获取选中的项 
 
  console. 
  log(options. 
  val( 
  '哈哈')); 
  //拿到选中项的值 
 
  console. 
  log(options. 
  text( 
  'anaj')); 
  //拿到选中项的文本 
 
  var maplist 
  = [ 
 
   { 
 
  "name": 
  "北京市", 
 
  "citys": [ 
 
  "东城区", 
 
  "西城区", 
 
  "崇文区", 
 
  "宣武区", 
 
  "朝阳区", 
 
  "海淀区", 
 
  "丰台区", 
 
  "石景山区", 
 
  "房山区", 
 
  "通州区", 
 
  "顺义区", 
 
  "昌平区", 
 
  "大兴区", 
 
  "怀柔区", 
 
  "平谷区", 
 
  "门头沟区", 
 
  "密云区", 
 
  "延庆区", 
 
  "其他" 
 
   ] 
 
   }, 
 
   { 
 
  "name": 
  "广东省", 
 
  "citys": [ 
 
  "广州", 
 
  "深圳", 
 
  "珠海", 
 
  "汕头", 
 
  "韶关", 
 
  "佛山", 
 
  "江门", 
 
  "湛江", 
 
  "茂名", 
 
  "肇庆", 
 
  "惠州", 
 
  "梅州", 
 
  "汕尾", 
 
  "河源", 
 
  "阳江", 
 
  "清远", 
 
  "东莞", 
 
  "中山", 
 
  "潮州", 
 
  "揭阳", 
 
  "云浮", 
 
  "其他" 
 
   ] 
 
   }, 
 
   { 
 
  "name": 
  "上海市", 
 
  "citys": [ 
 
  "黄浦区", 
 
  "卢湾区", 
 
  "徐汇区", 
 
  "长宁区", 
 
  "静安区", 
 
  "普陀区", 
 
  "闸北区", 
 
  "虹口区", 
 
  "杨浦区", 
 
  "宝山区", 
 
  "闵行区", 
 
  "嘉定区", 
 
  "松江区", 
 
  "金山区", 
 
  "青浦区", 
 
  "南汇区", 
 
  "奉贤区", 
 
  "浦东新区", 
 
  "崇明区", 
 
  "其他" 
 
   ] 
 
   }, 
 
   { 
 
  "name": 
  "天津市", 
 
  "citys": [ 
 
  "和平区", 
 
  "河东区", 
 
  "河西区", 
 
  "南开区", 
 
  "河北区", 
 
  "红桥区", 
 
  "塘沽区", 
 
  "汉沽区", 
 
  "大港区", 
 
  "东丽区", 
 
  "西青区", 
 
  "北辰区", 
 
  "津南区", 
 
  "武清区", 
 
  "宝坻区", 
 
  "静海县", 
 
  "宁河县", 
 
  "蓟县", 
 
  "其他" 
 
   ] 
 
   }, 
 
   ] 
 
  var strInfo 
  = 
  ''; 
 
  var citysInfo 
  = 
  ''; 
 
  $( 
  ".selectedCatTop .category-top"). 
  on( 
  "change", 
  function( 
  e) { 
 
  console. 
  log( 
  'value>>>>>', e.target.value); 
 
  var key 
  = e.target.value; 
 
  chooseCityArray(key); 
 
  // debugger; 
 
   }) 
 
  /**  
 
   * 操作第二级的工具方法 
 
   * str - {String} 省份名 
 
   * @return 拼接好的该省份城市option的html 
 
   */ 
 
  function 
  chooseCityArray( 
  str){ 
 
  var cityList; 
 
   maplist. 
  map( 
  function( 
  item){ 
 
  if(item.name 
  === str){ 
 
   cityList 
  = item.citys; 
 
   } 
 
   }) 
 
  console. 
  log(cityList) 
 
  if( 
  !cityList){ 
  return}; 
 
   citysInfo 
  = 
  ''; 
 
  for( 
  var i 
  = 
  0;i 
  < cityList.length; i 
  ++){ 
 
  var str 
  = cityList[i]; 
 
   citysInfo 
  += 
  '<option value="' 
  +str 
  + 
  '">' 
  + str 
  + 
  '</option>'; 
 
   } 
 
  $( 
  ".selectChild .category-child"). 
  html(citysInfo); 
 
   } 
 
  function 
  init(){ 
 
  // 省份列表 
 
   maplist. 
  map( 
  function( 
  item){ 
 
   strInfo 
  += 
  '<option value="' 
  +item.name 
  + 
  '">' 
  + item.name 
  + 
  '</option>'; 
 
  // var str = jsonSting.provinces[i].citys; 
 
   }); 
 
  $( 
  ".selectedCatTop .category-top"). 
  append(strInfo); 
 
  chooseCityArray(maplist[ 
  0].name) 
 
   } 
 
  init(); 
 
   </ 
  script>