select居中方法(weui-select)

July 20, 2017

<!-- 调整select，使居中   -->
<script type="text/javascript">
        $(function() {
            function getTextWidth(txt) {
                var $elm = $('<span class="tempforSize">' + txt + '</span>').prependTo("body");
                var elmWidth = $elm.width();
                $elm.remove();
                return elmWidth;
            }
            function centerSelect($elm) {
                var optionWidth = getTextWidth($elm.children(":selected").html())
                var emptySpace = $elm.width() - optionWidth;
                $elm.css("text-indent", (emptySpace / 2)); // -10 for some browers to remove the right toggle control width
            }
            // on start 
            console.log($('.weui-select'));
            $('.weui-select').each(function() {
                centerSelect($(this));
            });
            // on change
            $('.weui-select').on('change', function() {
                centerSelect($(this));
            });
        });
</script>

如果select是动态加载的,可以考虑加载完成再添加方法,或者用选择器的方式添加change方法:

  $(".yj_myform").on("change",".weui-select",function(){
             centerSelect($(this));
    });