select 选框显示设置

上图示

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

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

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

html代码

<div class="spyy-box step-2">       办理单位：<input type="text" id="spyy-danwei"  name="b" onfocus="b.blur()" />       <div class="select-danwei" >       <div class="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>               <li value="33">发改委</li>       </ul>       </div>       办理事项：<input type="text" id="spyy-content"  />     </div>

javascript代码 

这里使用的是JQ库

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

附件可下载

静静深夜 月涌江流

心似晴空 理想当头

行似深夜 智慧江流

人生代代 无穷无已

你来我往 谁为先手

人生如棋 黑白相间

局里局外 一生好走