插件名称:jquery-editable-select
下载地址:http://plugins.jquery.com/node/9250
这个插件有个小问题:
1、显示的是option的text值,没有显示value值
2、如果option有value和text,获取不到value值
就是无法获取select option的value值。现将这个插件的源代码进行修改:修改的原来的funtion是
duplicateOptions: function () {
var context = this ;
var wrapper = $(document.createElement( 'div' ));
wrapper.addClass( 'editable-select-options' );
var option_list = $(document.createElement( 'ul' ));
wrapper.append(option_list);
var options = this .select.find( 'option' );
options.each( function () {
if ($( this ).attr( 'selected' )) {
context.text.val($( this ).val());
context.current_value = $( this ).val();
};
var li = $( '<li>' + $( this ).val() + '</li>' );
context.initListItemEvents(li);
option_list.append(li);
});
this .wrapper = wrapper;
this .checkScroll();
},
修改为:
duplicateOptions: function () {
var context = this ;
var wrapper = $(document.createElement( 'div' ));
wrapper.addClass( 'editable-select-options' );
var option_list = $(document.createElement( 'ul' ));
wrapper.append(option_list);
var options = this .select.find( 'option' );
options.each( function () {
if ($( this ).attr( 'selected' )) {
context.text.val($( this ).text());
context.current_value = $( this ).val();
};
var li = $( '<li value=' +$( this ).val()+ '>' + $( this ).text() + '</li>' );
context.initListItemEvents(li);
option_list.append(li);
});
this .wrapper = wrapper;
this .checkScroll();
},
调用代码为:(可以直接使用)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
< html xmlns = "http://www.w3.org/1999/xhtml " >
< head >
< title >jQuery插件jquery.editable-select可输入的下拉框</ title >
< script type = "text/javascript" src = "../jquery-1.3.2.js" ></ script >
< script src = "jquery.editable-select.js" ></ script >
< link rel = "stylesheet" type = "text/css" href = "<span class=" hilite">jquery</ span >.editable-select.css"/>
</ head >
< body >
< div >
< label for = "name" >Names</ label >
< select name = "drpPublisher" id = "drpPublisher" class = "Winstar-input120" >
< option value = "0" >第一个</ option >
< option value = "1" >第二个</ option >
< option value = "2" >第三个</ option >
< option value = "3" >第四个</ option >
</ select >
</ div >
< input type = "text" id = "ddd" />
</ body >
< script type = "text/javascript" >
$(function() {
$('#drpPublisher').editableSelect(
{
bg_iframe: true,
onSelect: function(list_item) {
// 'this' is a reference to the instance of EditableSelect
// object, so you have full access to everything there
alert('List item text: '+ list_item.val());
$('#ddd').val(this.text.val());
},
case_sensitive: false, // If set to true, the user has to type in an exact
// match for the item to get highlighted
items_then_scroll: 10 // If there are more than 10 items, display a scrollbar
}
);
});
</ script >
</ html >