二级联动

省市二级联动

 

效果展示:

 

 

 

技术分析:

  1. 事件:onchange
  2. 使用一个二维数组存储省份和城市  (在真正开发时,是在数据库中获取的)
  3. 获取选择的选择的省份
    1. 使用方法传参的的方式:this.value(代表当前操作的项的值)

    4.遍历数组(获取里面的省份,与用户选择的省份比较,如果相同继续遍历该省份下所有的城市)

    5.创建文本节点和元素节点并进行添加操作

    CreateTextNode()

    CreateElement()

    appendChild()

步骤分析:

  1. 确定事件(onchange),并为其绑定一个函数
    1.   
        
  2. 创建一个二维数组,用于存储省份和城市
    1.   
  3. 获取用户选择的省份 
  4. 遍历二维数组的省份
    1.   
  5. 将便利的省份与用户选择的省份比较
    1.   
  6. 如果相同,遍历该省份下的城市  
    1.   
  7. 创建城市文本节点
    1.   
  8. 创建一个option元素节点
    1.        

  9. 将城市文本节点添加到option元素节点中去
    1.    
  10. 获取第二个下拉列表,并获取option元素节点添加上去  
    1.   
  11. 每次操作前清空第二个下拉列表的option的内容
    1.   

 

posted @ 2020-06-04 14:22  &何则  阅读(428)  评论(0)    收藏  举报