JQuery自製下拉式選單

Ref. 1 http://docs.jquery.com/Plugins/Authoring

    最近看了別人做的下拉式選單，覺得很有趣就想說用自己的邏輯跟用jQuery來
實作一下，但這個是很陽春的版本，沒有做什麼特效。至於我也參考了Ref. 1的
資料來做jQuery的plugin，至於為什麼要做plugin的原因是我想把這隻程式跟index.html
給分離開來好管理，如果對我這種作法有任何疑問跟有更好的想法希望能讓我知道然後
可以一起討論。

    如果想線上看效果可以上以下的網站去看：
http://jsfiddle.net/aDSdr/9/

那我也直接貼程式碼來跟大家分享：
============ index.html ===============

<script>
    $(document).ready(function(){
        $('#input1').selectDrop();
    });
</script>

<div id="warper1">
    <select name="" id="select1" style="display:none;">
         <option value="高雄" >高雄</option>
         <option value="台北">台北</option>
         <option value="台中" selected>台中</option>
         <option value="台南">台南</option>
         <option value="花蓮">花蓮</option>

    </select>
     <div class="inputbox1" id = "input1"></div>
     <button type="button">Submit</button>
</div>



============ css ============

#warper1{ margin:20px; position:relative; width:202px; float: left;}

#warper1 ul{list-style:none; margin: 0; padding:0;}

#warper1 ul li{line-height:20px; cursor:pointer; margin:1px 0; font-size:12px; text-indent:5px;}

.inputbox1{width:202px; height:23px; line-height:23px; background: #fff ; border:1px solid #333;  font-size:12px; text-indent:5px;}

.hover{ background:blue; color:#fff;}
.hover1{ background:red; color:#fff;}

.select_ul{background:#ddd;}

============ js ============


// 自製下拉式選單
(function($){

      $.fn.selectDrop = function(){
        
        var $input_select = $(this);
        var $ul = $(document.createElement("ul"));
        var Selects = $(this).parent('#warper1').find('select');
        var opt = $('option', Selects);      
        var opt_num = opt.length;
        var opt_list = [];
        
        // init
        $ul.addClass('select_ul');
        $ul.mouseleave(function(){
                $ul.hide();
        });    

        //
         for (var i=0; i<opt_num;i++ ){
             
            opt_list[i] = $(opt[i]).val();
            var $li = $("<li>" + opt_list[i] + "</li>");             
            $li.hover(function(){
                $(this).addClass('hover');
            },function(){
                $(this).removeClass('hover');
            });
                
            $li.click(function(){
                $("#input1").text($(this).text());
                $li.parent().hide();
            });
             
             $ul.append($li);
        };

        $("#input1").text(opt_list[0]);
          
        $input_select.after($ul);
        $ul.hide();
        
        $("#input1").click(function(){
             $ul.show();
        });
    };
})(jQuery)​