<script type="text/javascript">
$(function () {
$("#input").click(function () {
$("#open,#close").show();
});
$("#close").click(function () {
$("#open,#close").hide();
});
$(".list").click(function () {
$("#input").val($(this).html());
$("#open,#close").hide();
});
});
</script>
<style type="text/css">
#close{width:100%;height:100%;position:fixed;z-index:8888;margin:0;padding:0;display:none;}
#open{background-color:#efefef;width:200px;height:200px;z-index:9999;position:absolute;;display:none;}
.list{margin-left:15px;cursor:pointer;}
</style>
html:
<input type="text" id="input"/>
<div id="open">
<span class="list">文字1</span>
<span class="list">文字2</span>
<span class="list">文字3</span>
</div>
//close为透明背景层，为了点击open以外地方open关闭。
<div id="close"></div>
