自定义动态生成select下拉框，兼容ie9

大佬们救救孩子吧

于 2020-01-09 15:56:52 发布

阅读量260

点赞数

分类专栏： ie 文章标签： jquery html css

本文链接：https://blog.csdn.net/zhao_guang_liang/article/details/103909788

版权

ie 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<body>
    <style>
        #YLJG {
            width: 180px;
            height: 28px;
            cursor: pointer;
            padding: 0;
            border: 1px solid #D2D2D2;
            text-indent: 5px;
            border-radius: 2px;
            font-size: 14px;
            line-height: 28px;
        }
        #option_wrap,
        #option_wrap li {
            list-style: none;
        }
        #option_wrap {
            position: fixed;
            width: 180px;
            z-index: 999;
            font-size: 14px;
            border: solid 1px #D2D2D2;
            padding: 5px 0;
            border-radius: 5px;
            background-color: #fff;
            height: 300px;
            overflow: auto;
        }
        #option_wrap li {
            padding: 5px 10px 5px 5px;
            cursor: pointer;
        }
        #option_wrap li:hover {
            background-color: #efefef;
        }
        .my_active {
            background-color: #3F7CEE !important;
            color: #fff;
        }
        #option_icon {
            display: inline-block;
            border: solid 5px #fff;
            position: absolute;
            top: 8px;
            right: 5px;
            border-bottom-color: #999;
        }
        .option_icon_active {
            top: 12px !important;
            -webkit-transform: rotate(-180deg);
            -ms-transform: rotate(-180deg);
        }
    </style>
    <div style="position: relative;width: 182px;">
        <div id="YLJG" data-value="">请选择</div>
        <i id="option_icon"></i>
        <input type="text" name="YLJG" hidden id="YLJG1" value="">
        <ui id="option_wrap" style="display: none;">
        </ui>
    </div>
    <script>
        var ORGNAME2_value = ''     
        //事件委托 列表点击选中
        jQuery('#option_wrap').delegate('li', 'click', function () {
            jQuery('#YLJG').attr({ 'data-value': jQuery(this).attr('data-value') });
            jQuery('#YLJG').html(jQuery(this).html());
            jQuery('#YLJG1').attr({ 'value': jQuery(this).attr('data-value') })
            jQuery(this).addClass('my_active');
            jQuery(this).siblings().removeClass('my_active');
            if (jQuery('#XZQH_BM').val() != ORGNAME2_value && $('#XZQH_BM').attr('value') != '') {
                jQuery.ajax({
                    url: baseUrl + '/base/server/organize/getYljgList.do?ORGCODE=' + jQuery('#XZQH_BM').attr('value'),
                    type: "get",
                    success: function (res) {
                        var str = '<li data-value="" class="my_active">请选择</li>'
                        for (var i = 0; i < res.data.length; i++) {
                            str += '<li data-value="' + res.data[i].JGID + '">' + res.data[i].JGMC + '</li>'
                        }
                        jQuery('#option_wrap').html(str)
                    }
                })
                ORGNAME2_value = jQuery('#XZQH_BM').val()
            }
        })
        //下拉列表的显示与隐藏
        jQuery('#YLJG').click(function () {
            if($('#XZQH_BM').attr('value') != ''){
                return
            }
            jQuery('#option_icon').toggleClass('option_icon_active')
            jQuery('#option_wrap').css('display') == 'none' ? jQuery('#option_wrap').css('display', 'block') : jQuery('#option_wrap').css('display', 'none');
        })
        //点击屏幕关闭下拉框
        jQuery(window).click(function (e) {
            if (e.target == jQuery('#YLJG')[0]) {
                return;
            };
            jQuery('#option_wrap').css('display', 'none');
            jQuery('#option_icon').removeClass('option_icon_active');
        })
    </script>
</body>

大佬们救救孩子吧

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自定义动态生成select下拉框，兼容ie9

<body> <style> #YLJG { width: 180px; height: 28px; cursor: pointer; padding: 0; border: 1px solid #D2D2D2; ...
复制链接

扫一扫