jQuery自定义选择插件

我编写了一个简单的jQuery插件，它将UL列表转换为HTML选择框

演示：

HTML

jQuery函数：

(function ($) {
$.fn.kreeDropdown = function (options) {

//default vars for the plugin
    var defaults = {
        triggerClass: 'kd', // class name of link to trigger dropdown
        dataContainer: 'dataForReason'  //class of DIV containing <li> options
    };

    options = $.extend(defaults, options);

    //var ic = $('input#reason');
    var o  = options;
    var mi = '#'+$(this).attr('id');  // ID of destination input field
    var tc = 'a.'+o.triggerClass+''; // class name of link to trigger dropdown
    var dc = $('.'+o.dataContainer+''); //class of DIV containing <li> options
    var dl = $('.'+o.dataContainer+' li'); //li lists

//action starts here
    dc.hide();
    dc.addClass('kreeDropdownDC');

    $(this).next(tc).click(function() {
        dc.toggle();        
        dl.click(function() {
            //console.log($(this).prevUntil('input'));
            $(mi).val($(this).text());
            dc.hide();
        });                             

        return false;
    });
};
})(jQuery);

---

我怎样才能更熟练地编写这个插件呢？

像这样：

我编写了一个简单的插件，可以做到这一点。它非常简单和简约

我应该提到这个功能的主要原因是允许用户从下拉列表中选择一个值，他们可以在输入文本字段中修改该值。选择框中的值是固定响应，需要用户修改/编辑文本。谢谢。我没有提到这个功能的主要原因。请看我上面的评论。

   $('#reason').kreeDropdown();    

(function ($) {
$.fn.kreeDropdown = function (options) {

//default vars for the plugin
    var defaults = {
        triggerClass: 'kd', // class name of link to trigger dropdown
        dataContainer: 'dataForReason'  //class of DIV containing <li> options
    };

    options = $.extend(defaults, options);

    //var ic = $('input#reason');
    var o  = options;
    var mi = '#'+$(this).attr('id');  // ID of destination input field
    var tc = 'a.'+o.triggerClass+''; // class name of link to trigger dropdown
    var dc = $('.'+o.dataContainer+''); //class of DIV containing <li> options
    var dl = $('.'+o.dataContainer+' li'); //li lists

//action starts here
    dc.hide();
    dc.addClass('kreeDropdownDC');

    $(this).next(tc).click(function() {
        dc.toggle();        
        dl.click(function() {
            //console.log($(this).prevUntil('input'));
            $(mi).val($(this).text());
            dc.hide();
        });                             

        return false;
    });
};
})(jQuery);