现在使用各种系统和浏览器的上网用户都一大堆，为了统一网站样式，也少不了自定义控件。
因考虑到门户站，也特别引入皮肤功能，已使用于任意网站或页面。
此控件从jquery扩展出来，已在我架构的两个行业门户站使用两年，但我觉得它还有需要改进的地方，欢迎各位提出改进意见。
(function ($) {
/*
callback:{selectedIndex:int, selectedValue:string, selectedText:string}
*/
$.fn.comboBox = function (options, callback) {
var defaultOptions = {
width: 120, //下拉框宽度
type: '', //显示方式 html/input
writeable: true, //表单是否可写
data: null, //数据源 [{"name":"item 1","value":"value1"},{"name":"item 2"}]
selected: null, //当前选择项
value: null //当前选中值
};
var options = $.extend(defaultOptions, options);
var container = this;
this.each(function () {
var html = '';
html += '<div class="combo_title">';
html += '<div class="combo_t_l"></div>';
if (options.type == 'input') {
html += '<div class="combo_t_txt"><input';
if (options.writeable == false) {
html += ' readonly="readonly"';
}
html += ' name="' + (container.attr('name') || '') + '" class="input_txt" type="text" value="' + container.text().replace(/ /g, '') + '"/></div>';
} else {
html += '<div class="combo_t_txt">' + container.text().replace(/ /g, '') + '</div>';
}
html += '<div class="combo_t_r"></div>';
html += '</div>';
var default_title = '', default_value = '';
var selected = 0;
if (options.data != null) {
var items = typeof options.data === 'string' ? eval(options.data) : options.data;
html += '<div class="combo_items">';
html += '<ul>';
for (var i = 0; i < items.length; i++) {
if (options.value == items[i].value && options.value != '') {
html += '<li class="selected" val="' + items[i].value + '">' + items[i].name + '</li>';
default_title = items[i].name;
default_value = items[i].value;
selected++;
} else {
html += '<li val="' + items[i].value + '">' + items[i].name + '</li>';
}
}
html += '</ul>';
html += '</div>';
}
container.html(html).addClass('combo_container');
if (selected == 0) {
var selectedItem = container.find('.combo_items').children().children('li').eq(options.selected);
selectedItem.addClass('selected');
default_title = selectedItem.text();
default_value = selectedItem.attr('val');
}
if (default_title != '') {
setTitle(default_title);
setValue(default_value);
}
var w = options.width;
var input_width = w + 1 - container.children('.combo_title').children('.combo_t_r').width() - container.children('.combo_title').children('.combo_t_l').width();
container.width(w).children('.combo_title').children('.combo_t_txt').width(input_width).children('.input_txt').width(w - container.children('.combo_t_r').width() + 4);
container.children('.combo_items').width(w - 2).css('zIndex', 9999);
bindEvent();
});
function bindEvent() {
container.children('.combo_title').children().mouseover(function () {
container.children('.combo_title').children('.combo_t_r').addClass('combo_t_r_f');
});
container.children('.combo_title').children().mouseleave(function () {
container.children('.combo_title').children('.combo_t_r').removeClass('combo_t_r_f');
}).click(function () {
showItems();
var height = ($(window).height() - container.position().top + $(window).scrollTop()) - container.height() * 2;
if (container.children('.combo_items').height() >= height) {
container.children('.combo_items').height(height).css('overflow-y', 'scroll');
} else {
//container.children('.combo_items').height('auto').css('overflow-y', 'auto');
container.children('.combo_items').css('overflow-y', 'auto');
}
});
container.mouseleave(function () {
hideItems();
});
container.children('.combo_items').children('ul').children('li').mouseover(function () {
container.children('.combo_items').children('ul').children('li').removeClass('focus').eq($(this).parent().children('li').index($(this))).addClass('focus');
}).click(function () {
setTitle($(this).text());
setValue($(this).attr('val'));
hideItems();
if (callback) callback({ 'selectedIndex': $(this).index(), 'selectedValue': $(this).attr('val'), 'selectedText': $(this).text() });
});
};
function setTitle(title) {
if (options.type == 'input') {
container.children('.combo_title').children('.combo_t_txt').children('.input_txt').val(title);
} else {
container.children('.combo_title').children('.combo_t_txt').text(title);
}
};
function setValue(val) {
if (typeof (val) == 'undefined' || val == 'undefined') {
val = '';
}
if (options.type == 'input') {
container.children('.combo_title').children('.combo_t_txt').children('.input_txt').attr('val', val);
} else {
container.children('.combo_title').children('.combo_t_txt').attr('val', val);
}
};
function hideItems() {
container.children('.combo_items').hide();
};
function showItems() {
container.children('.combo_items').show();
};
};
})(jQuery);
var defaultOptions = { width: 120, //下拉框宽度 type: '', //显示方式 html/input writeable: true, //表单是否可写 data: null, //数据源 [{"name":"item 1","value":"value1"},{"name":"item 2"}] selected: null, //当前选择项 value: null //当前选中值 };
参数说明：
width: 下拉框控件的宽度；
type: 如果控件在表单(form)内，并且需要传递下拉选择的值，那么应该将type设置为input，否则设置为html即可；
writeable: 如果type设置为input，那么writeable生效，可设置下拉框的值是否可以编辑；
data: 绑定数据源，必须是json对象，值是一个只有name和value的对象的集合；
selected: 下拉框默认选项；
value: 赋给下拉框默认值，常在编辑是使用；
样式：
因控件内部已将样式名称(css class)写死，所以在使用此控件是尽量不要与此名称相同，避免冲突。