城市样式选择，类宝岛眼镜城市选择

help.js:

(function (document) {
    window.HELP = window.HELP || {};
    HELP.redrawSelect = function () {
        $("select").each(function () {
            HELP.redrawSelectByObj($(this));
        });
    }

    HELP.redrawSelectByObj = function (obj) {
        if(!$(obj).parent().hasClass('selectbox')) {
            $(obj).wrap('<div class="selectbox" tag="' + $(obj).attr('id') + '" />');
            $(obj).after("<span class='selecttext'></span><span class='select-arrow' ><a href='javascript:;' class='arrow' ></a></span>");
        }

        var val = $(obj)[0].options[$(obj)[0].selectedIndex].text;
        $(obj).next(".selecttext").text(val);
        $(obj).on('change', function () {
            var val = $(obj)[0].options[$(obj)[0].selectedIndex].text;
            $(obj).next(".selecttext").text(val);
        });
    }

})(document);

if (typeof define === "function" && define.amd) {
    define("help", [], function () {
        return HELP;
    });
}

 

html:使用area.js

<div class="select">
                    <div class="selectbox" tag="province">
                        <select id="s_province" name="s_province"></select>
                        <span class="selecttext">省/直辖市</span>
                        <span class="select-arrow"><a href="javascript:;" class="arrow"></a></span>
                    </div>
                    <div class="selectbox" tag="city">
                        <select id="s_city" name="s_city"></select>
                        <span class="selecttext">市/区</span>
                        <span class="select-arrow"><a href="javascript:;" class="arrow"></a></span>
                    </div>
</div>

 

js:

<script>
    $(function() {
        HELP.redrawSelect($('select'));//此处作用是点击之后select选中的值会替换掉span中的值
    });