Блог

Я написал простой плагин jQuery, который преобразует списки UL, чтобы вести себя как поле выбора HTML.

ДЕМОНСТРАЦИЯ: http://jsfiddle.net/xkHgz /

HTML

 <label for="reason">
<input name="reason" type="text" id="reason" /><a class="kd" href="javascript:;">select</a>
<div class="dataForReason">
    <ul>
        <li>Michael</li>
        <li>Joe</li>
        <li>Micah</li>
    </ul>
</div>
</label>
  

JS

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

Функция 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);
  

Как я мог бы написать этот плагин более эффективно?

Вот так: http://harvesthq.github.com/chosen /

Я написал простой плагин, который делает именно это. Он очень прост и минималистичен. http://westoque.github.com/bigbadselect