select集联选择demo
2019-02-28 本文已影响0人
昊哇恰
集联选择器
思路：
监听父级选择器的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元素加载完成后就出发了。
