jquery-editable-select

转载:http://blog.ywxyn.com/index.php/archives/291

 

十一月 14th, 2009 by 寻道者

 

插件名称: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 >

你可能感兴趣的:(JavaScript,jquery,PHP,css,XHTML)