不好意思，这知识为了方便在自己的电脑上看的

Jquery插件之可输入的select 《EDITABLE SELECT》
插件名称：jquery-editable-select
下载地址：http://plugins.jquery.com/node/9250这个插件有个小问题：
１、显示的是option的text值，没有显示value值
２、如果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>