SOURCE

$(document).ready(function () {
  
  	// 省市区选择，没用到可以不用拷贝
    $("#city-picker").cityPicker({
        title: '请选择城市',
        cols: [
            {textAlign: 'center'}
        ]
    });


    // 日期选择，没用到可以不用拷贝
    $("#datetime-picker").datetimePicker({
        title: '请选择日期',
        yearSplit: '年',
        monthSplit: '月',
        dateSplit: '日',
        times: function () {}
    });


    // 单列下拉选择，没用到可以不用拷贝
    $("#picker").picker({
      	title: "单列下拉菜单演示",
      	cols: [
            {
              	textAlign: 'center',
              	values: ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3']
            }
      	]
    });


	// 密码显示隐藏星号，没用到可以不用拷贝
    $(function () {
        var $togglepsw = $('.togglepsw');
        var $psw = $togglepsw.find('input[type="password"]');
        var $psw_txt = $togglepsw.find('input[type="text"]');
        $psw.on('input', function (e) {
            $psw_txt.val($(this).val());
        });
        $psw_txt.on('input', function (e) {
            $psw.val($(this).val());
        });
        $togglepsw.on('click', '.form-togglepsw', function (e) {
            var $this = $(this);
            if($this.hasClass('on')) {
                $this.removeClass('on');
                $psw.show();
                $psw_txt.hide();
            } else {
                $this.addClass('on');
                $psw.hide();
                $psw_txt.show();
            }
        });
    });


    // 模拟下拉菜单
    $(function () {
        $('.form-select').on('click', function (e) {
            e.stopPropagation();
            var $this = $(this);
            var $tit = $this.find('.tit');
            var $options = $this.find('.options');
            var $optionItem = $options.find('li:first');
            var $window = $(window);
            var down = ($tit.offset().top - $window.scrollTop() + $tit.height() + $options.height() <= $window.height());

            if(down) {
                $options.css({
                    'top': $tit.outerHeight() - 1 + 'px',
                    'bottom': 'auto',
                    'min-width': $tit.innerWidth() + 'px',
                    'height': $options.height()
                });
            } else {
                $options.css({
                    'top': 'auto',
                    'bottom': $tit.outerHeight() - 1 + 'px',
                    'min-width': $tit.innerWidth() + 'px',
                    'height': $options.height()
                });
            }
            $options.slideToggle('fast');
        });
        $('.form-select').on('click', '.options li', function (e) {
            var $parent = $(e.delegateTarget);
            var $tit = $parent.find('.tit');
            var $input = $parent.find('input[type="hidden"]');
            $tit.html($(this).html());
            $input.val($(this).data('value'));
        });
        $('body').on('click', function (e) {
            $('.form-select .options').slideUp();
        });
    });


    // 加减框
    $(function () {
        $('.form-jiajian').on('click input', function (e) {
            var $target = $(e.target);
            var $inp = $(this).find('.inp');
            var val = $inp.val();

            if($target.hasClass('js-jian-btn') && val >= 1) {
                val--;
            } else if($target.hasClass('js-jia-btn')) {
                val++;
            } else if($target.is('.inp')) {
                val = val.replace(/\D/g, '');
            }
            $inp.val(val);
        });
    });

});

<div class="m-media-list no-icon-r with-form">
    <ul class="block">
        <li class="item">
            <div class="txt with-select">
                <span class="l" style="margin-top: 5px;">自动方向</span>
                <span class="r">
                    <div class="form-item form-select">
                        <input type="hidden" value="0">
                        <div class="tit">请选择</div>
                        <ul class="options">
                            <li data-value="1">选项一选项一选项一选项一</li>
                            <li data-value="2">选项二</li>
                            <li data-value="3">选项三</li>
                        </ul>
                    </div>
                </span>
            </div>
        </li>
        <li class="item">
            <div class="txt">
                <span class="l">用户名</span>
                <span class="r">
                    <input type="text" class="form-item form-text" placeholder="文本框" />
                </span>
            </div>
        </li>
        <li class="item">
            <div class="txt">
                <span class="l">密码</span>
                <span class="r togglepsw">
                    <span class="form-togglepsw"></span>
                    <input type="password" class="form-item form-text" placeholder="密码框" />
                    <input type="text" style="display: none;" class="form-item form-text" placeholder="密码框" />
                </span>
            </div>
        </li>
        <li class="item">
            <div class="txt">
                <span class="l" style="margin-top: 5px;">加减框</span>
                <span class="r">
                    <div class="form-jiajian">
                        <span class="btn js-jian-btn">－</span><!--
                        --><input type="text" value="0" class="inp" /><!--
                        --><span class="btn js-jia-btn">＋</span>
                    </div>
                </span>
            </div>
        </li>
        <li class="item">
            <div class="txt">
                <span class="l">性别</span>
                <span class="r">
                    <label class="form-label">
                        <input type="radio" name="1" class="form-item form-radio" checked="checked" />
                        男
                    </label>
                    <label class="form-label">
                        <input type="radio" name="1" class="form-item form-radio" />
                        女
                    </label>
                </span>
            </div>
        </li>
        <li class="item">
            <div class="txt">
                <span class="l">课程选择</span>
                <span class="r">
                    <label class="form-label">
                        <input type="checkbox" name="2" class="form-item form-checkbox" checked="checked" />
                        多选项一
                    </label>
                    <label class="form-label">
                        <input type="checkbox" name="2" class="form-item form-checkbox" disabled="disabled" />
                        多选项二
                    </label>
                    <label class="form-label">
                        <input type="checkbox" name="2" class="form-item form-checkbox" />
                        多选项三
                    </label>
                </span>
            </div>
        </li>
        <li class="item">
            <div class="txt">
                <span class="l">省市区</span>
                <span class="r">
                    <input type="text" placeholder="请选择城市" id="city-picker" class="form-item form-text" />
                </span>
            </div>
            <span class="icon-r icon-arrow"></span>
        </li>
        <li class="item">
            <div class="txt">
                <span class="l">日期</span>
                <span class="r">
                    <input type="text" placeholder="请选择日期" id="datetime-picker" class="form-item form-text" />
                </span>
            </div>
            <span class="icon-r icon-arrow"></span>
        </li>
        <li class="item">
            <div class="txt">
                <span class="l">备注</span>
                <span class="r">
                    <textarea name="" id="" cols="30" rows="10" class="form-item form-textarea" placeholder="最多 140 字"></textarea>
                </span>
            </div>
        </li>
        <li class="item">
            <div class="txt">
                <span class="l">机型</span>
                <span class="r">
                    <input type="text" placeholder="请选择机型" id="picker" class="form-item form-text" />
                </span>
            </div>
        </li>
    </ul>
</div>

/* 表单 */

/* 单行文本、密码框、多行文本 */
.form-item { display: inline-block; vertical-align: 0; font-size: 14px; -webkit-appearance: none; appearance: none; outline: none; -webkit-transition: all .3s; transition: all .3s; }
    /* 文本框 */
    .form-text, .form-text:focus { width: 100%; border: none !important; }
    /* 多行文本框 */
    .form-textarea { margin-top: 1px; width: 100%; height: 50px; border: none; resize: none; }

/* 自定义单选、多选 */
.form-label { display: inline-block; margin-right: 10px; }
.form-radio, .form-checkbox { vertical-align: -3px; width: 16px; height: 16px; border: 1px solid #ddd; border-radius: 100% 100%; }
    .form-radio:checked, .form-checkbox:checked { border-color: #03a9f4; background: #03a9f4 url(http://pic.celong.cn/uploads/ueditor/2018-05-15/15263509026.png) no-repeat 50% 50%; -webkit-background-size: 100% 100%; background-size: 100% 100%; }
    .form-radio:disabled, .form-checkbox:disabled { background-color: #ccc; border-color: #bbb; }

/* 显示隐藏密码框星号 */
.togglepsw { position: relative; }
    .form-togglepsw { position: absolute; right: 0; margin-top: 3px; width: 16px; height: 16px; background:  url(http://pic.celong.cn/uploads/ueditor/2018-05-15/15263533458.png); -webkit-background-size: 100% 100%; background-size: 100% 100%; }
        .form-togglepsw.on { background-image: url(http://pic.celong.cn/uploads/ueditor/2018-05-15/15263533491.png); }

/* 重置 jqweui 选择器 */
.toolbar, .toolbar .title, .weui-picker-modal .picker-item, .weui-picker-modal .picker-items-col.picker-items-col-divider { text-align: center; font-size: 16px; }

/* 自定义下拉框 */
.with-select { overflow: visible !important; }
.form-select { position:relative; cursor:pointer; }
    /* 自定义下拉框标题，如果要控制宽度，只给标题写宽度即可 */
    .form-select .tit { padding: 0 20px 0 5px; width: 100px; height: 30px; line-height: 30px; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; border: 1px solid #ccc; background: url(http://pic.celong.cn/15274959659.png) no-repeat 98% 50%; }
    /* 自定义下拉框选项 */
    .form-select .options { display: none; position: absolute; left: 0; z-index: 1; border: 1px solid #ddd; background-color: #fff; }
        .form-select .options li { padding: 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; border-bottom: 1px solid #ddd; }
        .form-select .options li:last-child { border-bottom: none; }
            /* 自定义下拉框选项 hover 时 */
            .form-select .options li:hover { background-color: #eee; }

/* 加减框 */
.form-jiajian .inp, .form-jiajian .inp:focus { vertical-align: top; padding: 0 2px; width: 36px; height: 30px; text-align: center; border: solid #ddd; border-width: 1px 0; font-size: 14px; border-radius: 0; -webkit-appearance: none; appearance: none; }
.form-jiajian .btn { display: inline-block; vertical-align: top; width: 30px; height: 30px; line-height: 28px; text-align: center; background: #eee; font-size: 14px; border: 1px solid #ddd; box-sizing: border-box; cursor: pointer; }



/* -------- 以下代码与“手机设置项列表”一样，如果其它地方有用到就不用拷贝了 -------- */

/* 最外层 */
.m-media-list { overflow: hidden; position: relative; margin: 20px; background: #fff; font-size: 14px; }
    /* 列表 */
    .m-media-list > .block { margin 0; padding: 0; }
        /* 单个 */
        .m-media-list > .block > .item { position: relative; margin: 0; padding: 0 30px 0 50px; border-bottom: 1px solid #eee; }
            .m-media-list > .block > .item:last-child { border-bottom: none; }
            .m-media-list .icon-l, .m-media-list .icon-r { position: absolute; top: 50%; width: 16px; height: 16px; background-repeat: no-repeat; background-position: 100% 50%; background-size: auto 100%; transform: translateY(-50%); }
                /* 左侧图标 */
                .m-media-list .icon-l { left: 10px; width: 30px; height: 30px; }
                /* 右侧图标 */
                .m-media-list .icon-r { right: 15px; }
                /* 可替换和扩展图标 */
                .m-media-list .icon-home { background-image: url(http://pic.celong.cn/uploads/ueditor/2018-05-10/15259323844.png); }
                .m-media-list .icon-arrow { background-image: url(http://pic.celong.cn/152353183810.png); }
                /* 文本 */
                .m-media-list .txt { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; padding: 15px 0; }
                .m-media-list .info { float: right; padding: 15px 0 15px 10px; color: #999; }

    /* 没有左侧图标 */
    .m-media-list.no-icon-l > .block > .item { padding-left: 15px; }
    /* 没有右侧图标 */
    .m-media-list.no-icon-r > .block > .item { padding-right: 15px; }
    /* 没有两侧图标 */
    .m-media-list.no-icon > .block > .item { padding-left: 15px; padding-right: 15px; }
    /* 底边左侧缩进 */
    .m-media-list.short-border > .block > .item { overflow: visible; margin-left: 55px; padding-left: 0; }
        .m-media-list.short-border .icon-l { left: -40px; }
    /* 底边左侧缩进，同时没有左侧图标 */
    .m-media-list.no-icon-l.short-border > .block > .item, .m-media-list.no-icon.short-border > .block > .item { margin-left: 15px; }

    /* 包含表单 */
    .m-media-list.with-form > .block > .item { margin-left: 15px; padding-left: 80px; }
        .m-media-list.with-form .txt { white-space: normal; }
            .m-media-list.with-form .txt .l { overflow: hidden; position: absolute; margin-left: -80px; width: 80px; height: 20px;  white-space: normal; }
            .m-media-list.with-form .txt .r { float: none; display: block; }