移动端下拉列表适配

背景

移动端开发中，使用select做下拉框，会导致ios Android下各种样式的不统一以及表现形式的不统一等问题，因此很少使用原生的select来做下拉框选择，而是选择自己模拟下拉框来实现。

插件封装

在网上看了一些别人写的代码，基本上都是这样的，拿过来自己鼓捣了下，记下来方便以后直接使用。如有雷同之处，敬请谅解，有哪些可以改进的还希望路过大神不吝指点。
废话不多说，先上代码：

html结构

    

        
        

            --请选择--
            

                
html
                
css
                
js
            
        
 
    

说明：

1. html结构中的三处id必须设置；

js插件代码

      jQuery.selectDiv = function(boxId,inputId,bool){ 
        var selectInput = $(inputId);
        var selectCite = $(boxId+" cite");
        // 下拉列表的显示与隐藏
        selectCite.on("tap click", function(){ 
            var $ul = $(this).next("ul");
            if($ul.css("display") == "none"){
                $ul.show();
            }else{
                $ul.hide();
            }
        });
        // 选择框选中后对input的赋值
        $(boxId+" ul li").on("tap click", function(){
            selectCite.html($(this).text());
            selectInput.val($(this).data("inputValue")); // data()方法要求jQuery版本在1.4.3以上
            $(this).parent().hide();
        });
        // 点击任意处弹窗关闭
        $("body").on("tap click", function(e) {    
            if (e.target.id != selectCite.eq(0).attr("id")) { // 考虑到页面中可能会存在多个这样的下拉框，因此在html结构中需要对每个cite设置id，以辨识是哪个下拉框
                if($(boxId+" ul").css("display") == "block"){
                    $(boxId+" ul").hide();
                }
            }
        });
        // 默认自动获取第一个值
        if(typeof(bool) === "boolean" && bool){
            selectCite.html($(boxId+" ul li").eq(0).text());
            selectInput.val($(boxId+" ul li").eq(0).data("inputValue"));
        }
    };

调用方式

$.selectDiv(boxId, inputId, [bool]);
该方法可以接收三个参数：
boxId: 用于模拟select的下拉框盒子的id
inputId: 用于接收下拉选项的值的input元素的id
bool: 是否给下拉框设置默认值，是则设置为true，否可以不传该参数

$.selectDiv("#courseBox","#course",true); // 默认设置下拉框的值为第一个下拉项的值
$.selectDiv("#courseBox","#course");

其实，功能很简单，只是为了记录下来方便以后直接使用。