SOURCE

$(document).ready(function () {

	// 修正 IE9 input 事件，“密码显示隐藏星号”以及“加减框”需要
    (function (d) {
        if (navigator.userAgent.indexOf('MSIE 9') === -1) {
            return;
        }

        d.addEventListener('selectionchange', function() {
            var el = d.activeElement;

            if (el.tagName === 'TEXTAREA' || (el.tagName === 'INPUT' && el.type === 'text')) {
                var ev = d.createEvent('CustomEvent');
                ev.initCustomEvent('input', true, true, {});
                el.dispatchEvent(ev);
            }
        });
    })(document);


    // 密码显示隐藏星号，没用到可以不用拷贝
    $(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 () {
        function initForm() {
            var $form = $('.form-radio input[type="radio"], .form-checkbox input[type="checkbox"]');
            $form.each(function () {
                var $parent = $(this).parent();
                $parent.removeClass('checked');
                $(this).prop('checked') && $parent.addClass('checked');
                $(this).prop('disabled') && $parent.addClass('disabled');
            });
        }

        initForm();
        $('body').on('change', 'input', function (e) {
            initForm();
        });
    });


    // 模拟下拉菜单
    $(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-radio">
                        <input type="radio" name="1" checked="checked" />
                        男
                    </label>
                    <label class="form-radio">
                        <input type="radio" name="1" />
                        女
                    </label>
                </span>
            </div>
        </li>
        <li class="item">
            <div class="txt">
                <span class="l">课程选择</span>
                <span class="r">
                    <label class="form-checkbox">
                        <input type="checkbox" name="2" checked="checked" />
                        多选项一
                    </label>
                    <label class="form-checkbox">
                        <input type="checkbox" name="2" checked="checked" disabled="disabled" placeholder="密码框" />
                        多选项二
                    </label>
                    <label class="form-checkbox">
                        <input type="checkbox" name="2" />
                        多选项三
                    </label>
                </span>
            </div>
        </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 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>
    </ul>
</div>

/* 表单 */
/* 去掉 IE10+ 密码框默认小眼睛、输入框 X */
::-ms-clear, ::-ms-reveal { display:none; }

/* 单行文本、密码框、多行文本 */
.form-item { display: inline-block; vertical-align: 0; font-size: 14px; border: none; background: transparent; -moz-box-shadow: none; -ms-box-shadow: none; -webkit-box-shadow: none; box-shadow: 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: 60px; border: none; resize: none; }

/* 自定义下拉框 */
.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-radio, .form-checkbox { position: relative; margin-right: 10px; padding-left: 24px; }
    .form-radio input[type="radio"], .form-checkbox input[type="checkbox"] { position: absolute; left: -9999px; }
    /* 用来展示的单选多选框 */
    .form-radio::before, .form-checkbox::before { content: ''; position: absolute; left: 0; top: 50%; width: 16px; height: 16px; border: 1px solid #ddd; border-radius: 100% 100%; -webkit-transition: all .3s; transition: all .3s; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
    /* 用来展示的单选多选框选中时 */
    .form-radio.checked::before, .form-checkbox.checked::before { 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::before, .form-checkbox.disabled::before { background-color: #ccc; border-color: #bbb; }

/* 加减框 */
.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; }

/* 显示隐藏密码框星号 */
.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); }





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

/* 最外层 */
.m-media-list { 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%; -webkit-background-size: auto 100%; background-size: auto 100%; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); 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; }