自定义select的下拉框

原创
2016/08/27 17:13
阅读数 309

这是css样式,主要采用的是绝对定位

.pdt-blog{ width: 70%; margin:10px auto;}
.pdt-blog .select{ position: relative;display: inline-block;}
.pdt-blog .select ul{position: absolute;width: 100%;border: 1px solid #ddd; background: #fff;max-height: 10rem; overflow: auto; display:none;}
.pdt-blog .select ul li{padding: 3px; border-bottom: 1px solid #ddd;}

主要的HTML代码:

<div class="select">
        <input type="text" class="pdt-name" id="enter" placeholder="请输入产品品" />
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>

jquery代码:

$('body').click(function(event){
	$('.pdt-blog .select ul').css({'display':'none'});
});
$('input.pdt-name').click(function(event){
	event.stopPropagation();
	$(this).siblings('ul').css({'display':'block'});
});
$('.pdt-blog .select ul li').click(function(event){
	event.stopPropagation();
	var li_value=$(this).html();
	$(this).parent().siblings('input').val(li_value);
	$('.pdt-blog .select ul').css({'display':'none'});
});

JS原生代码:input获取焦点时显示列表,当input失去焦点时隐藏列表

 var enter = document.getElementById('enter');
    enter.onfocus = function() {
        var ul = document.getElementsByTagName('ul')[0];
        ul.style.display = "block";
        ul.style.opacity = "1"
        this.onblur = function() {

            let lis = document.getElementsByTagName('li')
            for (let key = 0; key < lis.length; key++) {

                lis[key].addEventListener('click', function() {
                    console.log("this current li="+this);
                });
            }
            document.getElementsByTagName('ul')[0].style.opacity = "0";
        }
    }

    function select(_this) {
        console.log(_this);
    }

 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部