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