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 = 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 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)  : item

            html += '<li class="dropMeun-item '+ (_this.item.className || '') +'" 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;
}