js实现下拉框功能

• body代码：

 <h3>请选择下拉框内容：</h3>
    颜色：
    <select name="" id="proc">
        <option value="">请选择水果颜色</option>
    </select>
    水果：
    <select name="" id="city">
        <option value="">请选择水果</option>
    </select>

• js代码：

<script src="../JS/jquery-3.3.1.min.js"></script>
    <script>
        // 创立数组存放数据
        var list=[];
        list["红色"]=["苹果", "西瓜"];
        list["黄色"]=["香蕉", "芒果"];
        // 追加数组循环遍历输出
        for(var n in list){
            $("<option value='"+n+"'>"+n+"</option>").appendTo("#proc");
        }
        
        // 给点击一个改变事件
        $("#proc").change(function(){
            // 1、获取第选项的选择元素
            var su=$(this).val();
            // 2、将获取的元素放在数组中查找
            var zu=list[su];
            // 将前面的元素移除/清空
            // $(this).text();
            $("#city option").remove();
            // 3、给下面的选项追加
            for(var i=0; i<zu.length; i++){
                $("<option value='"+zu[i]+"'>"+zu[i]+"</option>").appendTo("#city");
            }
        });
    </script>

• 效果图：