场景

下拉框为一个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());//这个地方取元素值时要看是不是直接元素内容哈

});

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

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