前端学习笔记（zepto或jquery）—— 布局技巧（一）

html5中有一些标签我们很难改变其样式，例如input=file，select等。这个时候我们需要改变一下思路，将原有透明度置为0，借助于div或span等以控制样式的标签来代替。

效果图：

 

        <div class="right"><span>请选择</span><i class="ion ion-ios-arrow-right"></i>
            <select id="Dept" class="select-item">
                <option value="a50c00af-9f65-47f1-8e65-ae8cefe14542">经营班子</option>
                <option value="a50c00af-b023-4944-9928-a3aa11087d47">综合管理部</option>
                <option value="a50c00af-d8e6-4141-bdfd-df82eb809232">技术经济评价室</option>
                <option value="a50c00af-e264-4e38-ac76-7e3333ae1545">生产调度室</option>
                <option value="a50c00af-ff90-4f3a-ae75-af0613284f1f">经营计划部</option>
                <option value="a50c00b0-0fb2-4463-9037-ff7ca490b9be">财务部</option>
                <option value="a50c00b0-1a79-4c77-b9a8-e85403bd980e">市场管理部</option>
                <option value="a50c00b0-291a-4bb5-b28c-b01ff8767fea">西北市场大区</option>
                <option value="a50c00b0-3647-4cd0-9dc4-2f4f606c7856">电网市场大区</option>
                <option value="a50c00b0-4272-471b-9ceb-e9feec84e7e5">华东市场大区</option>
                <option value="a50c00b0-4ead-4171-a2d8-19061933db85">电气一次设计室</option>
                <option value="a50c00b0-61b5-4f7b-a574-bd46357d16ca">电气二次设计室</option>
                <option value="a50c00b0-7189-4db4-9700-66563e136429">智能电网研究设计中心</option>
                <option value="a50c00b0-7fe4-403d-9978-7aeacc5fd70e">智能光伏研究设计中心</option>
                <option value="a50c00b0-9a73-45c4-804e-b268870df5b3">土建结构设计室</option>
                <option value="a50c00b0-a791-468b-a0e6-fbba3af98825">总图设计室</option>
                <option value="a50c00b0-b4f6-44ad-99f4-479d76fadcad">智能风电研究设计中心</option>
                <option value="a50c00c0-7698-4320-8fd0-bab86788b3cd">国际市场大区</option>
            </select>
        </div>

.select-item{
    height: 45px;
    line-height: 45px;
    opacity: 0;
    position: absolute;
    right: 0px; 
    top: 0px;
}

 

select的changed事件：

    $(".select-item").change(function(){
        var options=$(this)[0].options;
        var text=options[options.selectedIndex].innerHTML;
        // var text=$(this).find('option:selected').html(); 
         $(this).siblings("span").text(text);
    })