jquery-editable-select

最新推荐文章于 2025-07-14 11:00:36 发布

原创最新推荐文章于 2025-07-14 11:00:36 发布 · 612 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #JavaScript #CSS #XHTML #PHP #ViewUI

Jquery 插件专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个jQuery可编辑下拉框插件的问题及解决方案，该插件原本无法正确显示和获取下拉选项的value值。通过修改源代码，实现了同时显示text和value，并确保能获取到正确的value值。

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

十一月 14th, 2009 by 寻道者

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