jquery-editable-select

thinktothings

浏览: 777584 次
性别:
来自: 北京

最近访客更多访客>>

rocex

Janne

hekui1016

choulisa

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Jquery 插件

jQuery JavaScript CSS XHTML PHP

转载：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 >

分享到：

sexy-combo | OGNL笔记

2010-10-20 16:51
浏览 8514
评论(1)
分类:Web前端
查看更多

1 楼 liang_hongxiang 2013-02-05

还是获取不了select中值啊，获取的是text的内容而已。。

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论