<div> <span >职级：</span> <input type="text" value="其他"></input> <span></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 = null this.self = null this.option = option this.item = option.item || [] this.style = option.style || {} this.dataList = option.data || [] this.init() return this; } DropMeun.prototype.init = function () { var html = '', _this = this this.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 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) : item html += '<li data-index="'+ index +'">'+ content +'</li>' }) this.self.classList.add('dropMeun') this.self.innerHTML = html document.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.ev ev.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.ev ev.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; }