你可以试试jquery插件 chosen ，满足你的要求

楼上说道了 chosen ，那么我也推荐一个吧 BootstrapMultiselect .基于 bootstrap 的，支持多选，分组选，自定义样式，选项的可用与不可用等具体的参见 api 。如果楼主是为了学习研究而不是仅仅要在项目中使用，那就另当别论啦。

场景

下拉框为一个 li 列表，每个 li 的class为test-li

 

 

 <ul id="down-ul">
    <li class="test-li">1</li>
    <li class="test-li">1</li>
    <li class="test-li">1</li>
    <li class="test-li">1</li>
</ul>

input 的id设置test-input

 

 <input type="text" id="test-input" name="test-input">

点击事件

当input:focus的时候出发回调，展开下拉

 

 $("#test-input").("focus",function(){
    //这里的具体实现可以自己想下，我仅仅是举个最简单的隐藏和展开的例子

    $("#down-ul").show();
});

为 li 辅以点击动作回调，获取点击值，然后加入到input的值中

 

 $("test-li").on("click",function(){
   $("test-input").val($this.text());//这个地方取元素值时要看是不是直接元素内容哈

});