jquery-遍历数组添加选项

需求:点击标签，添加选项，代码如下，记得引入jquery！

html

<div class="list clearfix">
    <ul class="clearfix">
        <li data-checked="false" class="aa">股票</li>
        <li data-checked="false" class="bb">外汇</li>
        <li data-checked="false" class="cc">金属</li>
    </ul>
</div>

<select class="select">
    <option>选择</option>
</select>

css

<!-- 重置样式 -->
        .clearfix:after{
            content: '';
            display: block;
            clear: both;
        }
        ul{
            padding: 0;
            margin: 0;
        }
        ul li {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        /*列表样式*/
        .list ul li{
            float: left;
            width: 100px;
            height: 30px;
            border:1px solid #888;
            margin-left:20px;
            text-align: center;
            cursor: pointer;
            color: #888;

        }
        /*选项样式*/
        select{
            width: 200px;
            margin-left:20px;
            height: 30px;
        }

jquery

var arr1 = ["中路股份","武昌鱼","格力电器"];
var arr2 = ["欧元","美元","日元"];
var arr3 = ["铁","铜","铝"];


var arr = [arr1,arr2,arr3];
     

//点击列表的样式



    $('.list ul li').click(function(){
        var that = $(this);
        var index = that.index();
        // 判断是true,还是false
        $(this).data("checked", !(that.data('checked')));
        // 改变样式
         that.css('color',that.data('checked')?'#333':'#888');
     that.css('border',that.data('checked')?'1px solid #333':'1px solid #888');
        if(that.data('checked')){
        for(var i = 0; i <  arr[index].length; i++){
        $('select').append("<option class=new"+index+">"+arr[index][i]+"</option>");
    }
    }else{
        $('select option.new'+index).remove();
    
    }
    
    })