先上代码：
jQuery.beDropdownlist.js
  
 
  
     
   
  1. (function ($) {//jquery插件编写中，不能假设$是有效的，因此，使用这种包装函数，使得在下面的代码中可以继续写$,对于这个函数的分析，可以具体看下面的分析。 
    2.  
   
  2.     $.fn.beDropdownlist = function (data, fn) {// $.fn对象是$.prototype的别名，使用fn为了简洁。 
    3.  
   
  3.  
    4.  
   
  4.         //默认值 
    5.  
   
  5.         var defaults = { 
    6.  
   
  6.             data: ['nothing'] 
    7.  
   
  7.         } 
    8.  
   
  8.  
    9.  
   
  9.         var options = { data: data }; 
    10.  
   
  10.         options = $.extend(defaults, options); //使得参数覆盖 
    11.  
   
  11.  
    12.  
   
  12.         var bindevent = function (o) { 
    13.  
   
  13.             var tmpid = "tmpselector_" + $(o).attr("id"); //生成临时的id 
    14.  
   
  14.             if ($("#" + tmpid).length > 0) 
    15.  
   
  15.                 return; //退出，不在继续下去 
    16.  
   
  16.  
    17.  
   
  17.             var data = options.data; //数据源 
    18.  
   
  18.  
    19.  
   
  19.             //此处style中设置为absolute 
    20.  
   
  20.             var html = "<div id='" + tmpid + "' style='border: 1px solid grey;max-height: 150px;position:absolute; overflow: auto;background:white;'><ul class='ui-menu'>"; 
    21.  
   
  21.             //动态生成一个div，内含li元素 
    22.  
   
  22.             for (var item in data) { 
    23.  
   
  23.                 html += "<li>" + data[item] + "</li>"; 
    24.  
   
  24.             } 
    25.  
   
  25.             html += "</ul></div>"; 
    26.  
   
  26.             var left = $(o).offset().left; 
    27.  
   
  27.             var top = $(o).offset().top + $(o).height() + 4; 
    28.  
   
  28.  
    29.  
   
  29.             var finalize = function () { 
    30.  
   
  30.                 $("#" + tmpid + " li").die('click'); //取消事件绑定 
    31.  
   
  31.                 $("#" + tmpid).remove(); 
    32.  
   
  32.             } 
    33.  
   
  33.             $("body").append(html); 
    34.  
   
  34.             //设置该div的宽度，位置等。 
    35.  
   
  35.             $("#" + tmpid).width($(o).width() + 5); 
    36.  
   
  36.             $("#" + tmpid).offset({ top: top, left: left }); 
    37.  
   
  37.             $("#" + tmpid).live('mouseleave', function () { finalize(); }); 
    38.  
   
  38.             $("#" + tmpid + " li").live('click', function () { 
    39.  
   
  39.                 $(o).val($(this).text()); 
    40.  
   
  40.                 finalize(); 
    41.  
   
  41.                 if (fn != undefined) { 
    42.  
   
  42.                     fn(); //调用传进来的函数。 
    43.  
   
  43.                 } 
    44.  
   
  44.             }); 
    45.  
   
  45.         } 
    46.  
   
  46.  
    47.  
   
  47.         this.each(function () {//由于jquery的选择符可能匹配多个对象，所以需要用each，对每个匹配的元素做操作。 
    48.  
   
  48.             if ($(this).is(":text") == true) { 
    49.  
   
  49.                 $(this).click(function () { 
    50.  
   
  50.                     bindevent($(this)); //设置要做的内容 
    51.  
   
  51.                 }) 
    52.  
   
  52.             } 
    53.  
   
  53.         }); 
    54.  
   
  54.     }; 
    55.  
   
  55. })(jQuery); 
    56.  
  
 
  

    
  
 
  

   jQuery.beDropdownlist_demo.html
  
 
  
 
  

    
  
 
  
 
  
     
   
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2.  
   
  2. <html> 
    3.  
   
  3. <head> 
    4.  
   
  4.     <title></title> 
    5.  
   
  5.     <script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script> 
    6.  
   
  6.     <script src="jQuery.beDropdownlist.js" type="text/javascript"></script> 
    7.  
   
  7.     <script type="text/javascript"> 
    8.  
   
  8.         $(function () { 
    9.  
   
  9.             var city = ["上海", "北京", "西安", "哈尔滨", "广州", "深圳", "清远", "韶关", "河源", "梅州", "潮州", "汕头", "揭阳", "汕尾", "惠州", "东莞", "珠海", " 中山", "江门", "佛山", "肇庆", "云浮", "阳江", "茂名", "湛江"]; 
    10.  
   
  10.             $("#txtCity").beDropdownlist(city, function () { alert($("#txtCity").val()) }); 
    11.  
   
  11.             //$("#txtCity").beDropdownlist(city); 
    12.  
   
  12.             var country = ["中国", "日本", "美国", "德国"]; 
    13.  
   
  13.             $("#txtCountry").beDropdownlist(country); 
    14.  
   
  14.         }); 
    15.  
   
  15.  
    16.  
   
  16.     </script> 
    17.  
   
  17.     <link rel="stylesheet" type="text/css" href="jQuery.beDropdownlist.css" /> 
    18.  
   
  18. </head> 
    19.  
   
  19. <body> 
    20.  
   
  20.     <br> 
    21.  
   
  21.     <br> 
    22.  
   
  22.     国家：<input type="text" id='txtCountry' value="" /> 
    23.  
   
  23.     城市：<input type="text" id='txtCity' value="" /> 
    24.  
   
  24. </body> 
    25.  
   
  25. </html> 
    26.  
  
 
  

    
  
 
  

   编写jquery有几点注意：
  
 
  

   $.fn对象是$.prototype的别名，使用fn为了简洁。
  
 
  

   options = $.extend(defaults, options); 使得参数覆盖，该函数的具体说明可以参考jQuery手册。
  
 
  

   由于jquery的选择符可能匹配多个对象，所以需要用each，对每个匹配的元素做操作。
  
 
  

   jquery插件编写中，不能假设$总是是有效的，因此，使用包装函数，使得在下面的代码中可以继续写$。
  
 
  

   包装函数的形式如下：
  
 
  

    
  
 
  
 
  
     
   
  1. (function ($) { 
    2.  
   
  2.             
    3.  
   
  3.  })(jQuery); 
    4.  
  
 
  

    
  
 
  

    
  
 
  

   该方式使用的是一种匿名函数的方式，传入的参数是jQuery，函数体内部仍然用$符合作为jQuery对象，因此很方便，与之等价的写法其实就是：
  
 
  

    
  
 
  
 
  
     
   
  1. var baozhuanghanshu=function ($) { 
    2.  
   
  2.  //具体实现 
    3.  
   
  3. } 
    4.  
   
  4. baozhuanghanshu(jQuery) 
    5.  
  
 
  

    
  
 
  

    
  
 
  

   也就是说，上面的jquery插件也可以采用这种写法，直接调用baozhuanghanshu即可。甚至可以把$写成$my$作为jQuery。如下：
  
 
  

    
  
 
  
 
  
     
   
  1. var baozhuanghanshu=function ( $my$ ) { 
    2.  
   
  2. //具体实现 
    3.  
   
  3.        } 
    4.  
   
  4. baozhuanghanshu(jQuery) 
    5.  
  
 
  

   但是一般遵循约定，包装方法都是写成
  
 
  

   (function ($) {
  
 
  

    })(jQuery);
  
 
  

   这种形式，有利于不同程序员的阅读。