有没有人用过 jquery 美化下拉列表的插件 jQuery.SelectBox.js ???有问题咨询

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了有没有人用过 jquery 美化下拉列表的插件 jQuery.SelectBox.js ???有问题咨询相关的知识,希望对你有一定的参考价值。

我用jQuery.SelectBox.js来美化下拉列表后!就获取不到下拉列表的值!!
有没有知道是怎么回事!该怎么解决啊??
谢谢!
在线等你们!!会的就路过来看看!!!

这是我以前写的 分享给你!

<style type="text/css">
*margin:0;padding:0;
.icon_comsborder-width:6px;border-style:solid;border-color: #ccc #fff #fff #fff;
.selectelementcursor:pointer;display:inline-block;line-height:26px;padding:1px 20px 0 10px;border:1px solid #E1E8E5;position:relative;z-index:1;border-radius:4px;
.selectelement spanwhite-space:nowrap;text-align:center;min-width:24px;max-width:128px;overflow:hidden;text-overflow:ellipsis;display: inline-block;background:#fff;
.selectelement .showNavbackground:#fff;display:none;border:2px solid #599EFE;position:absolute;left:-2px;top:26px;border-radius:0 4px 4px 4px;
.selectelement ulmax-height: 260px;overflow-x:hidden;overflow-y:auto;
.selectelement liwhite-space:nowrap;height:26px;line-height:26px;padding:0 10px;cursor:pointer;
.selectelement li:hoverbackground:#f0f0f0;
.selectelement li.activebackground:#599EFE;color:#fff;
.selectelement .icon_comswidth:0;height:0;position:absolute;right:4px;top:11px;overflow:hidden;transition:all 0.15s ease-out;-moz-transition:all 0.15s ease-out;-webkit-transition:all 0.15s ease-out;-o-transition:all 0.15s ease-out;
.selectelement_activeborder-color:#599EFE;border-width:2px;border-radius:3px 3px 0 0;z-index:2;padding:0 19px 0 9px;border-bottom:0;
.selectelement_active .showNavdisplay:block;
.selectelement_active .icon_comsborder-color:#fff #fff #ccc #fff;border-color:#fff #fff #ccc #fff\9;top:3px;
.selectelement .bgoverflow:hidden;height:2px;background:white;margin-top:-2px;
</style>

<div class="selectelement" onclick="oSelect.init(event,this)">

<span>当前选项是什么么么</span>
<div class="showNav" onclick="oSelect.select_target(event,this);">
<div class="bg"></div>
<ul>
<li>栏栏栏栏栏栏栏栏栏</li>
<li>栏目1</li>
<li>栏目22222222222222222222</li>
<li>栏目33333333</li>
<li>栏目</li>
<li>栏</li>
<li>1</li>
<li>100</li>
</ul>
</div>
<b class="icon_coms"></b>
</div>

<script type="text/javascript" >

var oSelect =

init:function(ev,that)
var ev = ev || event;
var oBg=getByClass(that,"bg")[0];

if(hasClass(that,"selectelement_active"))
removeClass(that,"selectelement_active");
else
addClass(that,"selectelement_active");


ev.cancelBubble=true;
oBg.style.width=that.offsetWidth-4+"px";
oSelect.oEl(that);
,
select_target:function( ev,that )
var li = that.getElementsByTagName("li");
var oBg = that.getElementsByTagName("div")[0];
var ev = ev || window.event;
var oSpan = prev(that);
var target = ev.target || ev.srcElement;

if( target.nodeName.toLowerCase() == "li" )
for(var i=0;i<li.length;i++)
li[i].className="";

oSpan.innerhtml=target.innerHTML.toString();
target.className="active";
removeClass(target.parentNode.parentNode,"selectelement_active");

oBg.style.width=that.parentNode.offsetWidth-4+"px";
ev.cancelBubble=true;
,
oEl:function(that)
document.onclick=function()
removeClass(that,"selectelement_active");




//class
function getByClass( oParent,sClass )

var oParents=oParent||document;

var aEle=oParents.getElementsByTagName("*");

var aResult=[];

var reg=new RegExp("\\b"+sClass+"\\b","i");

for(var i=0;i<aEle.length;i++)

if(reg.test(aEle[i].className))

aResult.push(aEle[i]);


return aResult;

/*判断class是否存在*/
function hasClass( obj,sClass )

var oDiv=null;

if( typeof(obj) == "object" )

oDiv=obj;

else if( obj.charAt(0)=="#" )

oDiv=$$( obj.substring( 1 ));


var oClass=oDiv.className;

if(oClass)
if(oClass.indexOf( sClass )>0)
return true;
else
return false;

else
return false;



/*添加样式*/
function addClass( obj,sClass )

var oDiv=null;

if( typeof( obj ) == "object" )

oDiv=obj;

else if( obj.charAt(0) == "#" )
oDiv=$$( obj.substring(1) );

var oClass=oDiv.className;

if( oClass )
if( oClass.indexOf(sClass)<0 )
oDiv.className=oClass+" "+sClass;

else
oDiv.className=sClass;



/*移除当前class*/
function removeClass( obj,sClass )
var oDiv=null;

if( typeof(obj) =="object" )

oDiv=obj;

else if(obj.charAt(0)=="#")

oDiv=$$(obj.substring(1));

var oClass=oDiv.className;

if(oClass&&oClass.indexOf(sClass)>0)

oDiv.className=oClass.replace(sClass,"");



</script>
参考技术A http://www.codefans.net/soft/19040.shtml
自己看看追问

这个我看过了!下载不了!!
这个插件也不支持onchange事件!
有什么办法吗?

追答

额。我想想啊

以上是关于有没有人用过 jquery 美化下拉列表的插件 jQuery.SelectBox.js ???有问题咨询的主要内容,如果未能解决你的问题,请参考以下文章

jquery.chosen.js下拉选择框美化插件项目实例

第一个jquery插件,下拉列表(很简单,后续有需要再添加)

有没有人用过第三方开源的android UI组件。介绍一下

怎么设置Jquery 多选下拉列表插件jquery multiselect 的高度

jQuery自定义漂亮的下拉框插件8种效果

jQuery自定义漂亮的下拉框插件8种效果