本文通過制作一個機票出發城市與到達城市的下拉框的效果講解了閉包操作。

效果不錯。但不足的地方是在于彈出下拉框時，框體與文本框的對齊問題解決的不太理想，基本上換個位置就得重新在代碼里手動設置個偏移值，一直沒有想到什么好的解決方案，不知道各位有什么好的主意。

下面就是具體的代碼：

css的代碼：

 <style type="text/css"> 

 #oyesgo_city_popping
{
  display: none;
  position: absolute;
  z-index: 9999;
  background-color: rgb(255, 255, 255);
   width: 254px;
   height: 140px;
  border: 1px solid rgb(0, 128, 0);
} 

#oyesgo_city_popping h3 {
   border-bottom:1px solid #C4D3E6;
    color:#5E5E5E;
  font-size:12px;
font-weight:normal;
line-height:200%;
   margin:0 auto;
  width:94%;
} 

#oyesgo_city_popping  ul {
  margin-top:7px;
overflow:hidden;
width:300px;
 padding-left: 0px;
  margin-top: 0px;
} 

#oyesgo_city_popping ul li {
    float:left; line-height:190%;
   text-align:center;
  width:17%;
  list-style-type:none;
   font-size:10pt;
} 

.arr_btn_close{ position: absolute; right: 9px; top: 5px; cursor:pointer; } 

 </style> 

html代碼：

 <div> 
出 發：<input name="depcity" autocomplete="off" style="width: 98px;" id="dep" > 
到 達：<input name="arrcity" autocomplete="off" style="width: 98px;" id="arr"> 
</div> 

<div name="cityframe" id="oyesgo_city_popping" > 
     <h3>熱門城市</h3> 
        <ul></ul> 
        <a title="close" id="oyesgo_city_closewin" class="arr_btn_close">x</a> 
</div> 

<input style="display:none;" id="oyesgo_hidden_input"> 

 javascript代碼:

<script> 
   //城市框點擊事件，顯示熱門城市div 
    function fun(){ 
         var event = this; 
         var eleobj = document.getElementById('oyesgo_city_popping'); 
        //初始化城市列表li 
         var ulobj = eleobj.getElementsByTagName("ul")[0]; 
         ulobj.innerHTML = ''; 
         var lifacObj = lifactory(event); 
         var allcity = { 
               'depcity':'北京 上海 廣州 深圳 杭州 南京 成都 武漢 青島 大連 重慶 三亞 鄭州 寧波 西安 長沙 昆明 沈陽 廈門 哈爾濱'.split(' '),//出發城市 
               'arrcity':'北京 上海 廣州 深圳 杭州 南京 成都 武漢 青島 大連 重慶 三亞 鄭州 寧波 西安 長沙 巴黎 紐約 東京 新加坡'.split(' ') //到達城市 
       } 

        cityarry=allcity[event.name]; 
        for (var i=0; i<cityarry.length; i++) { 
             var liobj=lifacObj(cityarry[i],eleobj); 
             ulobj.appendChild(liobj); 
         }; 
         //顯示城市選擇框 
         //eleobj.style.display='block'; 
         openCitySelectFrame(event); 

    } 

    //li工廠 
    function lifactory(ele){ 
         //attachEvent 
        var func=function(name,cityframe){ 
             var liobj=document.createElement("li"); 
             liobj.innerHTML='<a  style="cursor:pointer;">'+name+'</a>'; 
             var aobj=liobj.getElementsByTagName('a')[0]; 
             appendEventListener.call(aobj,'click',function(){ 
                 //城市點擊后，將對應城市名稱填入框中 
                 ele.value=name; 
                 //城市選擇框關閉 
                 closeCitySelectFrame(ele); 
             }); 
             return liobj; 
         }; 
         return func; 
     } 
     //增加事件 
     function appendEventListener(eventtype,func){ 
        if (this.addEventListener) { 
             this.addEventListener(eventtype, func, false); 
         } 
         else if (this.attachEvent) { 
                eventtype='on'+eventtype; 
                this.attachEvent(eventtype, func); 
         } 
     } 

     //關閉城市選擇框 
     function closeCitySelectFrame(){ 
         try { 
             var cityframe = document.getElementById('oyesgo_city_popping'); 
             cityframe.style.display = 'none'; 
             if (!!cityframe.inputeleobj) { 
                 cityframe.inputeleobj.focus(); 
             } 
             //從自定義屬性中移除文本框 
             cityframe.inputeleobj = null; 
         }catch(e){} 
     } 

    //開啟城市選擇框 
     function openCitySelectFrame(inputele){ 
         if(!inputele){ 
             return; 
         } 
         var cityframe=document.getElementById('oyesgo_city_popping'); 
        //移動框的左邊界與input框的邊界一致 
         try { 
             cityframe.style.left = (inputele.offsetLeft) + 'px';                     
         }catch(e){ 
             cityframe.style.left = inputele.posLeft; 
         } 
        cityframe.style.display='block'; 
         //將文本框對象添加到自定義屬性 
         cityframe.inputeleobj=inputele; 
     } 

    //為城市框添加事件 
     (function(){ 
         var depele=document.getElementById('dep'); 
         var arrele=document.getElementById('arr'); 
         var elearray=[depele,arrele]; 
        var eleobj=document.getElementById('oyesgo_city_popping'); 
         for (var i=0; i<elearray.length; i++) { 
            elearray[i].onclick=fun; 
         }; 
         //對彈出框中的小叉號添加關閉事件 
         var closebutton=document.getElementById('oyesgo_city_closewin'); 
         appendEventListener.call(closebutton,'click',function(){ 
             closeCitySelectFrame(); 
         }); 
         //添加doc click事件 
         appendEventListener.call(document,'click',function(){ 
             var eleobj=document.activeElement; 
             var namefun={'depcity':true,    'arrcity':true,'cityframe':true}; 
             if(!namefun[eleobj.name]){ 
                 closeCitySelectFrame(); 
             } 
         }); 
           
     })(); 
</script>

代碼不是算太多，但能夠很好地跨瀏覽器運行（Chrome /firefox / ie6,7,8）