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});
本文标题：jquery下拉插件,常用的jquery插件
标题路径：http://myzitong.com/article/hosoid.html