需求:點擊標(biāo)簽，添加選項，代碼如下，記得引入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();
    
    }
    
    })