dropMenu----简单的下拉菜单生成器

HTML 

<div class="input-group"><span class="input-group-addon" style="width: 100px" >职级：</span><input type="text" class="units form-control" id="jobTitle" value="其他" style="border-radius:0 4px 4px 0;"></input><span class="caret beside"></span>
</div>

js

$(function(){var title,populationType,titleInParty;$.ajax({url:'/api/v1/user/getUserTypeInfo',type:'GET',dataType:'json',success:function (data) {title=data.data.title;titleInParty=data.data.titleInParty;populationType=data.data.populationType;partyLabel('jobTitle',title);partyLabel('populationType',populationType);partyLabel('titleInParty',titleInParty);}});

function partyLabel(menuID,data){new DropMeun({'id':menuID,"data":data,"dataSrc":"name",  //数据是下面的这种格式的，你要的是name的值"ableSearch":true, //可以搜索"style":{   //样式，可选"width":173,"maxHeight":200,"left":0, //定位到哪里"top":5,"initPos":"left"  //设置在哪边出现}})}

3.在页面中引用一个js 文件

(function(vq0599) {window.DropMeun = vq0599
})(function() {/*-- tools --*/function getRealTop(node) {return node.offsetParent.tagName.toUpperCase() === 'BODY' ?node.offsetTop :node.offsetTop + arguments.callee(node.offsetParent)}function getRealLeft(node) {return node.offsetParent.tagName.toUpperCase() === 'BODY' ?node.offsetLeft :node.offsetLeft + arguments.callee(node.offsetParent)}/*-- tools end--*/function DropMeun(option) {this.picker = nullthis.self = nullthis.option = optionthis.item = option.item || []this.style = option.style || {}this.dataList = option.data || []this.init()return this;}DropMeun.prototype.init = function () {var html = '',_this = thisthis.self = document.createElement('ul')this.picker = document.getElementById(this.option.id)if (! this.picker) {throw 'picker is null, making sure that picker\'s ID \''+ this.option.id +'\' is correct'return}if (this.option.ableSearch) {html += '<li><input class="dropMeun-searchInput" type="text"></li>'}this.dataList.forEach(function(data, index) {var item         = _this.option.dataSrc ? data[_this.option.dataSrc] : data,content = _this.item.render  ? _this.item.render(item, data)  : itemhtml += '<li class="dropMeun-item '+ (_this.item.className || '') +'" data-index="'+ index +'">'+ content +'</li>'})this.self.classList.add('dropMeun')this.self.innerHTML = htmldocument.body.appendChild(this.self)this.setStyle()this.bindEvent()}DropMeun.prototype.setStyle = function() {this.self.style.width =this.style.width ?(parseInt(this.style.width) - 26) + 'px' :'150px'this.self.style.maxHeight =this.style.maxHeight ?(parseInt(this.style.maxHeight) - 26) + 'px' :'300px'var w = getRealLeft(this.picker) + (parseInt(this.style.left) || 0)var h = getRealTop(this.picker) + this.picker.offsetHeight + (parseInt(this.style.top) || 0)var realWidth = parseInt(this.self.style.width) + 26     // 26 = dobule(padding + border)if (this.style.initPos === 'right') {w = w - realWidth + this.picker.offsetWidth}this.self.style.top  = h + 'px'this.self.style.left = w + 'px'}DropMeun.prototype.bindEvent = function() {var_this = this,iEvent = this.picker.nodeName.toUpperCase() !== 'INPUT' ?'click' :this.picker.type.toUpperCase() === 'TEXT' ?'focus' : 'click'this.picker.addEventListener('click', function(ev) {var ev = ev || window.evev.stopPropagation()})//
        this.picker.addEventListener(iEvent, function(ev) {document.body.click()     // 触发 window.click 使其他dropMeun关闭
_this.self.style.display = 'block'})//
        window.addEventListener('click', function() {_this.self.style.display = 'none'})//
        this.self.addEventListener('click', function(ev) {var ev = ev || window.evev.stopPropagation()// 事件委托 item点击if (ev.target.classList.contains('dropMeun-item')) {var index = parseInt(ev.target.getAttribute('data-index'))data = _this.option.dataSrc ?_this.dataList[index][_this.option.dataSrc] :_this.dataList[index]if (iEvent === 'focus') {_this.picker.value = ev.target.innerText}if (_this.item.callbakc) {_this.item.callbakc(data, _this.picker, _this.dataList[index], _this.dataList)}_this.self.style.display = 'none'}})//
        if (_this.option.ableSearch) {_this.searchInput = _this.self.getElementsByClassName('dropMeun-searchInput')[0]_this.searchInput.addEventListener('keyup', function() {var target = this.value.trim(),items = _this.self.getElementsByClassName('dropMeun-item');[].slice.call(items).forEach(function(item, index) {item.style.display =item.innerText.indexOf(target) === -1 ?'none' : ''})})}}return DropMeun
}())

4.在页面中引用一个css文件

ul,
li {list-style: none;margin: 0;padding: 0;
}.dropMeun {position: absolute;border: 1px solid #ccc;overflow: auto;padding: 8px 12px;box-shadow: 0 6px 12px rgba(0, 0, 0, .175);background-color: #fff;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;box-sizing: content-box;display: none;
}.dropMeun li.dropMeun-item {min-width: 150px;padding: 2px 2px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}.dropMeun li.dropMeun-item:hover {cursor: pointer;background-color: rgba(238, 238, 238, 0.8);
}.dropMeun-searchInput {outline: none;width: 100%;box-sizing: border-box;
}