2011-10-23 17 views
0

私は、ULリストをHTML選択ボックスのように振る舞うための簡単なjQueryプラグインを書いています。jQuery custom select plugin

DEMO: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); 

?このよう

+0

この機能の主な理由は、ユーザーが入力テキストフィールドで変更できる「ドロップダウン」から値を選択できるようにすることです。選択ボックスの値は固定された応答であり、ユーザーはテキストを変更/編集する必要があります。 – nasigoreng

答えて