带提示的下拉菜单，Js模拟的 - 手册网

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<script type="text/javascript">
var divSelect = {};
(function() {
    var obj = {}, oLeft = {}, oContent = {}, oButton = {}, oInput = {}, oList = {}, oData = {}, oCallBack = {};
    var timer = {};
	var $ = function(id) {
        return document.getElementById(id);
    }
	var count = function(obj) {
        var length = 0;
        if (typeof obj == 'object') {
            for (k in obj) {
                length++;
            }
        }
        return length;
    }
	var getPosition = function(obj) {
        if (!obj) {
            return {};
        }
        var top = 0;
        var left = 0;
        var width = obj.offsetWidth;
        var height = obj.offsetHeight;
        while (obj.offsetParent) {
            top += obj.offsetTop;
            left += obj.offsetLeft;
            obj = obj.offsetParent;
        }
        return {"top":top,"left":left,"width":width,"height":height};
    }
    var addEvent = function(ele, type, func) {
        if (document.addEventListener) {
            ele.addEventListener(type, func, true);
        } else if (document.attachEvent) {
            ele.attachEvent('on' + type, func);
        }
    }
    var liSort = function(a, b) {
        if (a.testResult == b.testResult) {
            return 0;
        }
        if (a.testResult) {
            return -1;
        }
        return 1;
    }
    var sortList = function(id) {
        var v = oInput[id].value;
        var oFragment = document.createDocumentFragment();
        var list = [];
        for (var i = 0; i < oList[id].childNodes.length; i++) {
            list.push(oList[id].childNodes[i]);
        }
        //replace(/([\.\\\/\*\?\+\[\(\)\]\{\}\^\$\|])/g,"\\$1");
        var re = new RegExp(v.replace(/(?=[.\\/*?+\[()\]{}^$|])/g, "\\"), "i");
        for (var i = 0; i < list.length; i++) {
            list[i].testResult = re.test(list[i].text);
        }
        list.sort(liSort);
        var oFragment = document.createDocumentFragment();
        for (var i = 0; i < list.length; i++) {
            oFragment.appendChild(list[i]);
        }
        oList[id].appendChild(oFragment);
    }
    divSelect = {
        init : function(id, data, width, callBack) {
            obj[id] = $(id);
            obj[id].className = 'divSelect';
            oData[id] = data;
            oCallBack[id] = callBack;
            oLeft[id] = document.createElement('div');
            obj[id].appendChild(oLeft[id]);
            oLeft[id].className = 'left';
            oContent[id] = document.createElement('div');
            obj[id].appendChild(oContent[id]);
            oContent[id].className = 'content';
            oButton[id] = document.createElement('div');
            obj[id].appendChild(oButton[id]);
            oButton[id].className = 'btn1';
            oInput[id] = document.createElement('input');
            oContent[id].appendChild(oInput[id]);
            oInput[id].className = 'text';
            oList[id] = document.createElement('ul');
            oContent[id].appendChild(oList[id]);
            oList[id].className = 'list';
            if (width) {
                oContent[id].style.width = width;
                oInput[id].style.width = width - 2;
                oList[id].style.width = width;
            }
            if (count(oData[id]) > 10) {
                oList[id].style.height = '165px';
                oList[id].style.overflowY = 'scroll';
            } else {
                oList[id].style.height = 15 * (count(oData)+1) + 'px';
                oList[id].style.overflowY = 'auto';
            }
            for (key in oData[id]) {
                oInput[id].value = oData[id][key].text;
                obj[id].value = oData[id][key].value;
                break;
            }
            for (key in oData[id]) {
                if (oData[id][key].selected == true) {
                    oInput[id].value = oData[id][key].text;
                    obj[id].value = oData[id][key].value;
                }
                var oLi = document.createElement('li');
                oList[id].appendChild(oLi);
                oLi.value = oData[id][key].value;
                oLi.text = oData[id][key].text;
                oLi.innerHTML = oData[id][key].text;
                addEvent(oLi, 'mouseover', (function(id){
                    return function() {
                        event.srcElement.className = 'spec';
                    }
                })(id));
                addEvent(oLi, 'mouseout', (function(id){
                    return function() {
                        event.srcElement.className = '';
                    }
                })(id));
                addEvent(oLi, 'click', (function(id) {
                    return function() {
                        obj[id].value = event.srcElement.value;
                        oInput[id].value = event.srcElement.text;
                        if (typeof oCallBack[id] == 'function') {
                            oCallBack[id](event.srcElement.value, event.srcElement.text);
                        }
                    }
                })(id));
            }
            for (var i = 0; i < oList[id].childNodes.length; i++) {
                if (oList[id].childNodes[i].value == obj[id].value) {
                    oList[id].childNodes[i].className = 'spec';
                    break;
                }
            }
            addEvent(oInput[id], 'focus', (function(id) {
                return function() {
                    oInput[id].select();
                }
            })(id));
            addEvent(obj[id], 'mousedown', (function(id){
                return function() {
                    var pos = getPosition(obj[id]);
                    oList[id].style.display = 'block';
                    oList[id].style.top = pos.top + pos.height + 2;
                    oList[id].style.left = pos.left + 1;
                }
            })(id));
            addEvent(document, 'click', (function(id) {
                return function() {
                    oList[id].style.display = 'none';
                    oList[id].innerHTML = '';
                    for (key in oData[id]) {
                        var oLi = document.createElement('li');
                        oList[id].appendChild(oLi);
                        oLi.value = oData[id][key].value;
                        oLi.text = oData[id][key].text;
                        oLi.innerHTML = oData[id][key].text;
                        addEvent(oLi, 'mouseover', (function(id){
                            return function() {
                                event.srcElement.className = 'spec';
                            }
                        })(id));
                        addEvent(oLi, 'mouseout', (function(id){
                            return function() {
                                event.srcElement.className = '';
                            }
                        })(id));
                        addEvent(oLi, 'click', (function(id) {
                            return function() {
                                obj[id].value = event.srcElement.value;
                                oInput[id].value = event.srcElement.text;
                                if (typeof oCallBack[id] == 'function') {
                                    oCallBack[id](oList[id].childNodes[i].value, oList[id].childNodes[i].text);
                                }
                            }
                        })(id));
                    }
                }
            })(id));
            addEvent(obj[id], 'click', function() {
                    event.cancelBubble = true;
                }
            );
            addEvent(oButton[id], 'mousedown', (function(id){
                return function() {
                    oButton[id].className = 'btn2';
                }
            })(id));
            addEvent(oButton[id], 'mouseup', (function(id){
                return function() {
                    oButton[id].className = 'btn1';
                }
            })(id));
            addEvent(oInput[id], 'keydown', (function(id) {
                return function() {
                    clearTimeout(timer[id]);
                    if (event.keyCode == 38 || event.keyCode == 40) {
                        if (oList[id].childNodes.length < 2) {
                            return;
                        } else {
                            if (event.keyCode == 38 && oList[id].childNodes[0].className != 'spec') {
                                for (var i = 0; i < oList[id].childNodes.length; i++) {
                                    if (oList[id].childNodes[i].className == 'spec') {
                                        oList[id].childNodes[i].className = '';
                                        oList[id].childNodes[i - 1].className = 'spec';
                                        break;
                                    }
                                }
                            } else if (event.keyCode == 40 && oList[id].childNodes[oList[id].childNodes.length - 1].className != 'spec') {
                                for (var i = 0; i < oList[id].childNodes.length; i++) {
                                    if (oList[id].childNodes[i].className == 'spec') {
                                        oList[id].childNodes[i].className = '';
                                        oList[id].childNodes[i + 1].className = 'spec';
                                        break;
                                    }
                                }
                            }
                        }
                        return;
                    }
                    if (event.keyCode == 13) {
                        if (oList[id].childNodes.length > 0) {
                            for (var i = 0; i < oList[id].childNodes.length; i++) {
                                if (oList[id].childNodes[i].className == 'spec') {
                                    obj[id].value = oList[id].childNodes[i].value;
                                    oInput[id].value = oList[id].childNodes[i].text;
                                    if (typeof oCallBack[id] == 'function') {
                                        oCallBack[id](oList[id].childNodes[i].value, oList[id].childNodes[i].text);
                                    }
                                    break;
                                }
                            }
                        }
                        return;
                    }
                    oList[id].scrollTop = '0px';
                    timer[id] = setTimeout((function(id) {
                        return function() {
                            sortList(id);
                            if (oList[id].childNodes.length > 0) {
                                oList[id].childNodes[0].className = 'spec';
                            }
                        }
                    })(id), 100);
                }
            })(id));
        },
        setValue : function(id, value, text) {
            obj[id].value = value;
            oInput[id].value = text;
        }
    }
})();
</script>
<style type="text/css">
.divSelect {
    overflow:hidden;
    vertical-align:middle;
    display:inline;
}
.divSelect .left {
    float:left;
    line-height:20px;
    height:20px;
    background:#fff url(//ku.shouce.ren/files/images/201601/56a363f81e4f4.gif) no-repeat
    ;width:2px;
}
.divSelect .btn1 {
    float:left;
    line-height:20px;
    height:20px;
    background:#fff url(//ku.shouce.ren/files/images/201601/56a363f897fa1.gif) no-repeat;
    width:17px;
}
.divSelect .btn2 {
    float:left;
    line-height:20px;
    height:20px;
    background:#fff url(//ku.shouce.ren/files/images/201601/56a363f919d3b.gif) no-repeat;
    width:17px;
}
.divSelect .content {
    float:left;
    background:#fff url(//ku.shouce.ren/files/images/201601/56a363f9ce6fd.gif) repeat-x center center;
    line-height:20px;
    height:20px;
    width:100px;
}
.divSelect .text {
    width:98px;
    margin:2px 0 0 0;
    padding:0 0 0 2px;
    float:left;
    border:0;
    height:17px;
    line-height:17px;
    background:#f6f8fd;
}
.divSelect .list {
    position:absolute;
    font-size:12px;
    line-height: 15px;
    margin:0;
    border:1px #000 solid;
    background: #f6f8fd;
    text-align:left;
    display:none;
    width:102px;
    height:50px;
    scrollbar-face-color:#d4d0c8;
    scrollbar-shadow-color:#808080;
    scrollbar-highlight-color:#fff;
    scrollbar-3dlight-color:#d4d0c8;
    scrollbar-darkshadow-color:#404040;
    scrollbar-track-color:#d4d0c8;
    scrollbar-arrow-color:#000;
}
.divSelect .list li {
    width:100%;
    color:#333;
    margin:0;
    padding:0;
    height:15px;
    line-height:15px;
    cursor:pointer;
    list-style-type:none;
    padding-left:2px;
    display: block;
    white-space:nowrap;
    overflow:hidden;
}
.divSelect .list li.spec {
    background:#0a246a;
    color:#fff;
}
</style>
<body>
<div id="sss"></div>
</body>
<script type="text/javascript">
var callback = function() {
    alert(document.getElementById('sss').value);
}
var data = [{'text' : 'abcdefg', 'value' : 1, selected : false}, {'text' : 'efghijkl', 'value' : 2, selected : true}, {'text' : 'labmn', 'value' : 3, selected : false}];
divSelect.init('sss', data, 200, callback);
</script>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

带提示的下拉菜单，Js模拟的

分类

表单按钮

描述

用JavaScript模拟的带提示的下拉菜单，不过好像还不太好用，只是实现了基本功能，还需要改进很多，希望高手帮尽快改进哦，用得几张下拉框样式的图片，请自行保存到本地。

收藏