21_数组过滤

本题考点：onchange事件、过滤

根据题目要求，实现一个价格过滤选择框，当选择价格范围的时候，ul列表中的内容会根据选择的价格重新渲染，核心步骤有：

1. 创建重渲染函数，每"select"节点的onchange事件触发时，会调用该函数重新渲染ul列表中的内容
2. 给"select"节点添加onchange事件，每当事件触发，对"select"节点当前值进行判断，对"cups"数组进行重新排序并且调用重渲染函数

参考答案：

select.onchange = function(){
    ul.innerHTML = ''
    switch(parseInt(this.value)){
        case 1 :
            var newArr = cups.filter((item)=>{return item.sales < 100})
            break
        case 2:
            var newArr = cups.filter((item)=>{return item.sales <= 500 && item.sales >= 100})
            break
        case 3:
            var newArr = cups.filter((item)=>{return item.sales > 500})
            break
    }
    listRendering(newArr)
}

function listRendering(arr) {
    var str = ''
    arr.forEach(element => {
        str += `<li>${element.name}</li>`
    })

    ul.innerHTML = str
}