可输入文本的SELECT

最新推荐文章于 2024-05-21 16:24:56 发布

Morven

最新推荐文章于 2024-05-21 16:24:56 发布

阅读量5.9k

点赞数

分类专栏： JQUERY

JQUERY 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

Morven

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
可输入文本的SELECT

插件名称：jquery-editable-select下载地址：http://plugins.jquery.com/node/9250这个插件有个小问题：１、显示的是option的text值，没有显示value值２、如果option有value和text，获取不到value值就是无法获取select option的value值。现将这个插件的源代码进行修改：修改的原来的funt
复制链接

扫一扫

专栏目录