select 選框顯示設(shè)置

上圖示

這里是select選框，初始化顯示和平常一樣

點(diǎn)擊文本框選擇，會(huì)彈出浮動(dòng)層，顯示選項(xiàng)，并且有清空，關(guān)閉，按鈕

點(diǎn)擊后，會(huì)把選項(xiàng)里的內(nèi)容添加到文本框里面

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>請(qǐng)選擇辦理單位</b>
        <em>關(guān)閉</em>
        <span>清空</span>
      </div>
      <ul>
        <li>稅務(wù)局</li>      
        <li>發(fā)改委</li>
        <li>規(guī)劃局</li>  
        <li>技術(shù)監(jiān)督局</li>  
        <li>煙草專賣局</li>  
        <li>文廣新局</li>  
        <li>供電公司</li>  
        <li>氣象局</li>  
        <li>土地流轉(zhuǎn)中心</li>  
        <li>農(nóng)牧局</li>  
        <li>稅務(wù)局</li>      
        <li value="33">發(fā)改委</li>
      </ul>
      </div>
      辦理事項(xiàng)：<input type="text" id="spyy-content"  />
    </div>

javascript代碼 

這里使用的是JQ庫(kù)

  <script type="text/javascript">
$(document).ready(function(){
    //選擇單位
  $('#spyy-danwei').click(function(){ 
    $('.select-danwei').fadeIn('fast'); 
  });
    //對(duì)每一個(gè)li元素監(jiān)聽
  $('.select-danwei li').each(function(i){ 
    $(this).click(function(){ 
	  $('#spyy-danwei').val(($(this).text())); 
	  $('.select-danwei').fadeOut('fast'); 
	}); 
  });
  
    //標(biāo)題欄關(guān)閉和清空  
  $('.spyy-title em').click(function(){ 
    $('.select-danwei').fadeOut('fast'); 
  });
  
  $('.spyy-title span').click(function(){
    $('.select-danwei').fadeOut('fast'); 
	$('#spyy-danwei').val(""); 
  });
  
  }); 
</script>

附件可下載

靜靜深夜 月涌江流

心似晴空 理想當(dāng)頭

行似深夜 智慧江流

人生代代 無(wú)窮無(wú)已

你來(lái)我往 誰(shuí)為先手

人生如棋 黑白相間

局里局外 一生好走