jquery下拉插件,常用的jquery插件

求jquery版的多选树形下拉框的插件(Multiple ComboTree)？

第一步，创建静态页面select.html，引入select2相关的css和js文件，并引入jQuery核心js，如下图所示：

专注于为中小企业提供成都做网站、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业金林免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上1000+企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

第二步，在body标签内插入select元素，设置属性multiple和class，宽度为300px，如下图所示：

第三步，初始化select2插件，需要调用select2()方法，如下图所示：

第四步，为了演示获取下拉框值，这里利用button按钮点击事件，在select下方插入一个button按钮，如下图所示：

5

第五步，编写按钮点击事件，事件里获取多选下拉框值和文本内容，如下图所示：

6

第六步，在浏览器中进行预览，点击“取值”按钮，会看到打印下拉框选择的值和文字，如下图所示：

jquery 下拉刷新插件如何实现当前最新数据覆盖上次页面的旧数据

可以先移除掉旧数据，再新增上新数据。

比如$("select").remove(old);

再$("select").add(new)

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

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

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

li1/li

li100/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;ili.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;iaEle.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(oClassoClass.indexOf(sClass)0){

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

}

}

/script

怎么修改jquery下拉列表插件bootstrap-select样式

浏览器当前列表页面按F12进入调试模式。

点击有个箭头图标查看页面元素-划到下来列表你要修改样式的位置-会显示当前样式的class 名与相关属性设置的数值信息。

插件bootstrap-select如果有引用的CSS文件去里搜索找到的CLASS名。如果没有css文件，只有一个js文件，那么你去js文件中搜索你查看到的class。

如果解决请采纳，没解决欢迎继续提问。

jQuery 多选下拉框插件

插件没有，不过可以说说原理；设置一个input type=“text" readonly=truebr/select multiple style="display:none"/select,当点击input的时候，查询数据库，将值赋值给select并让select显示出来，选择option的时候给input赋值就搞定了。

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

这个插件没有定义控件的高度的配置，控件也没有设置高度，依据内容的高度来确定控件整体高度，你可以给样式添加高度即可。不过还是修改源代码来实现高度控制好点，可以随便配置，而不用统一

2者结合也可以

css覆盖部分，你也可以修改jquery.multiselect.css这个css文件增加style里面的样式

link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" /

style

.ui-multiselect{line-height:30px;height:30px}

/style

或者修改jquery.multiselect.js文件，增加一个cHeight配置，用来控制控件的高度，找到下面的这句，修改成这样

var button = (this.button = $('button type="button"span class="ui-icon ui-icon-triangle-1-s"/span/button'))

===改成这样，判断配置了cHeight增加增加style控制高度

var button = (this.button = $('button type="button"'+(o.cHeight?' style="height:'+o.cHeight+'px"':'')+'span class="ui-icon ui-icon-triangle-1-s"/span/button'))

DEMO

$("select").multiselect({cHeight:40});