<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select name="" id="">
        <option value="0">请选择销量范围</option>
        <option value="1"><100</option>
        <option value="2">100~500</option>
        <option value="3">>500</option>
    </select>
    <ul>
        <li>牛客logo马克杯</li>
        <li>无盖星空杯</li>
        <li>老式茶杯</li>
        <li>欧式印花杯</li>
    </ul>

    <script>
        var cups = [
            { type: 1, price: 100, color: 'black', sales: 60, name: '牛客logo马克杯' },
            { type: 2, price: 40, color: 'blue', sales: 100, name: '无盖星空杯' },
            { type: 4, price: 60, color: 'green', sales: 200, name: '老式茶杯' },
            { type: 3, price: 50, color: 'green', sales: 600, name: '欧式印花杯' }
        ]
        var select = document.querySelector('select');
        var ul = document.querySelector('ul');
        // 补全代码

        // 分类
        let lessList = [];
        let centerList = [];
        let moreList = [];

        for (let i = 0, l = cups.length; i < l; i++) {
            if (cups[i].sales < 100) {
                lessList.push(cups[i]);
            }
            else if (cups[i].sales > 500) {
                moreList.push(cups[i]);
            } else {
                centerList.push(cups[i]);
            }
        }

        // 封装渲染函数
        function render(arr) {
            // 清空原ul
            ul.innerHTML = '';

            let frg = document.createDocumentFragment();
            for (let item of arr) {
                let li = document.createElement('li');
                li.innerHTML = item.name;

                frg.appendChild(li);
            }
            ul.appendChild(frg);
        }


        select.onchange = () => {
            let val = select.value;
            if (val == 1) {
                render(lessList);

            } else if (val == 2) {
                render(centerList);
            }
            else if (val == 3) {
                render(moreList);
            } else {
                // 未选择时显示全部商品
                render(cups);
            }
        }

    </script>
</body>

</html>