插件名稱(chēng)：jquery-editable-select
下載地址：http://plugins.jquery.com/node/9250

這個(gè)插件有個(gè)小問(wèn)題：
１、顯示的是option的text值，沒(méi)有顯示value值
２、如果option有value和text，獲取不到value值
就是無(wú)法獲取select option的value值?，F(xiàn)將這個(gè)插件的源代碼進(jìn)行修改：修改的原來(lái)的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('<SPAN class=hilite1>select</SPAN>ed')) {
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('<SPAN class=hilite1>select</SPAN>ed')) {
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();
},

調(diào)用代碼為：（可以直接使用）

<!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<SPAN class=hilite2>可輸入</SPAN>的下拉框</title>
<script type="text/javascript" src="../jquery-1.3.2.js"></script>
<script src="jquery.editable-<SPAN class=hilite1>select</SPAN>.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">第一個(gè)</option>
<option value="1">第二個(gè)</option>
<option value="2">第三個(gè)</option>
<option value="3">第四個(gè)</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 Editable<SPAN class=hilite1>Select</SPAN>
// 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>


設(shè)值：$('#country').val('bb');
取值：$('#country').val();
增加OPTION
      aa = $('#country').editableSelect(
      {
        bg_iframe: true,
        onSelect: function(list_item) {
          $('#results').html('List item text: '+ list_item.text() +'<br> \
          Input value: '+ this.text.val());
        }
      }
    );
    //var select = $('.editable-select:first');
    //var instances = select.editableSelectInstances();
    //instances[0].addOption('Germany, value added programmatically');
    var instance = aa.editableSelectInstances()[0];
    instance.addOption('Germany, value added programmatically');
    instance.addOption('aa');