上图示

这里是select选框，初始化显示和平常一样

点击文本框选择，会弹出浮动层，显示选项，并且有清空，关闭，按钮

点击后，会把选项里的内容添加到文本框里面

html代码

<divclass="spyy-boxstep-2">办理单位：<inputtype="text"id="spyy-danwei"name="b"onfocus="b.blur()"/><divclass="select-danwei"><divclass="spyy-title"><b>请选择办理单位</b><em>关闭</em><span>清空</span></div><ul><li>税务局</li><li>发改委</li><li>规划局</li><li>技术监督局</li><li>烟草专卖局</li><li>文广新局</li><li>供电公司</li><li>气象局</li><li>土地流转中心</li><li>农牧局</li><li>税务局</li><livalue="33">发改委</li></ul></div>办理事项：<inputtype="text"id="spyy-content"/></div>

javascript代码

这里使用的是JQ库

<scripttype="text/javascript">$(document).ready(function(){//选择单位$('#spyy-danwei').click(function(){$('.select-danwei').fadeIn('fast');});//对每一个li元素监听$('.select-danweili').each(function(i){$(this).click(function(){$('#spyy-danwei').val(($(this).text()));$('.select-danwei').fadeOut('fast');});});//标题栏关闭和清空$('.spyy-titleem').click(function(){$('.select-danwei').fadeOut('fast');});$('.spyy-titlespan').click(function(){$('.select-danwei').fadeOut('fast');$('#spyy-danwei').val("");});});</script>

附件可下载


静静深夜 月涌江流

心似晴空 理想当头

行似深夜 智慧江流

人生代代 无穷无已

你来我往 谁为先手

人生如棋 黑白相间

局里局外 一生好走


附件：http://down.51cto.com/data/2366633