select集联选择demo

集联选择器
思路：
监听父级选择器的change事件，当其改变时我们拿到它的id值然后去匹配数据中和这个id匹配的子集数据。使用这些数据渲染子集select框

require(['./db.js'],function(db){

  $(function(){

    //window.onload是js的入口函数，说明页面元素，js/css/图片等文件全部加载完成后在还行

    //但$(funciton(){})jquery的入口函数只要dom节点加载完成及可以生效

  const {dataA,dataB} = db

  // 初始化第一个选择列表

  getOption("#pro", dataA)

  //渲染选择框的函数

  function getOption(domId, data) {

    data.forEach(item => {

      $(domId).append(`<option value=${item.subId?item.subId:item.proId}>${item.name}</option>`)

    })

  }

  //联动

  //1.给select设置事件监听

  $('#pro').on('change', function (e) {

    //由于创建dom会一直保留，所以在每次添加时需要删除之前的dom--否则dom节点会一直追加

    $('#sub').empty()

    //拿到选择的id值后我们根据层级1的id渲染关联的下一层级

    const proId = $(this).val()

    //过滤符合选择层级1的选项

    let subArr = dataB.filter(item => {

      return item.proId == proId

    })

    //渲染层级2选择框

    getOption("#sub", subArr)

  })

  })

})

当页面加载时我们首先渲染父级列表，然后在点击之后显示子集列表

遇到的问题

`数据分离：这里需要提到2点 一个是require.js 一个是AMD模块规范

在开始的时候我直接使用了import/export 语法发现html不支持，而后想到用babel把ES6==>ES5后在进行引用发现依然不行----页面报错 require没有定义

再后来找到关于require的文档发现，需要引入require.js文件来实现引入。其规范有两种一个是common.js一个是AMD规范。

common.js定义缺陷在于异步加载的不确定性，而AMD规范则是在引入模块完成后，执行回调函数在这个回调中模块肯定已经加载完成。

随着一步一步的深入了解后发现，只要按照规范写代码就可以引入文件了。

入口函数:

在require的回调函数中我使用了window.onload加载入口，发现执行不了。后来使用jq的入口函数$(funciotn(){})解决了这个问题。

想提到的onload是需要页面资源完全加载后才出发，而$(function(){})页面dom元素加载完成后就出发了。

`
感谢阮一峰老师的文章require.js的用法

这里附带demo github项目路径