Question

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

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

Answer 1

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

<style type="text/css">
*{margin:0;padding:0;}
.icon_coms{border-width:6px;border-style:solid;border-color: #ccc #fff #fff #fff;}
.selectelement{cursor: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 span{white-space:nowrap;text-align:center;min-width:24px;max-width:128px;overflow:hidden;text-overflow:ellipsis;display: inline-block;background:#fff;}
.selectelement .showNav{background:#fff;display:none;border:2px solid #599EFE;position:absolute;left:-2px;top:26px;border-radius:0 4px 4px 4px;}
.selectelement ul{max-height: 260px;overflow-x:hidden;overflow-y:auto;}
.selectelement li{white-space:nowrap;height:26px;line-height:26px;padding:0 10px;cursor:pointer;}
.selectelement li:hover{background:#f0f0f0;}
.selectelement li.active{background:#599EFE;color:#fff;}
.selectelement .icon_coms{width: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_active{border-color:#599EFE;border-width:2px;border-radius:3px 3px 0 0;z-index:2;padding:0 19px 0 9px;border-bottom:0;}
.selectelement_active .showNav{display:block;}
.selectelement_active .icon_coms{border-color:#fff #fff #ccc #fff;border-color:#fff #fff #ccc #fff\9;top:3px;}
.selectelement .bg{overflow: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>

Answer 2

http://www.codefans.net/soft/19040.shtml
自己看看

追问

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

追答

额。我想想啊