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

第一步，創(chuàng)建靜態(tài)頁面select.html，引入select2相關的css和js文件，并引入jQuery核心js，如下圖所示：

專注于為中小企業(yè)提供成都做網站、成都網站制作服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)金林免費做網站提供優(yōu)質的服務。我們立足成都，凝聚了一批互聯(lián)網行業(yè)人才，有力地推動了上1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網站建設實現(xiàn)規(guī)模擴充和轉變。

第二步，在body標簽內插入select元素，設置屬性multiple和class，寬度為300px，如下圖所示：

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

第四步，為了演示獲取下拉框值，這里利用button按鈕點擊事件，在select下方插入一個button按鈕，如下圖所示：

5

第五步，編寫按鈕點擊事件，事件里獲取多選下拉框值和文本內容，如下圖所示：

6

第六步，在瀏覽器中進行預覽，點擊“取值”按鈕，會看到打印下拉框選擇的值和文字，如下圖所示：

jquery 下拉刷新插件如何實現(xiàn)當前最新數(shù)據(jù)覆蓋上次頁面的舊數(shù)據(jù)

可以先移除掉舊數(shù)據(jù)，再新增上新數(shù)據(jù)。

比如$("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 名與相關屬性設置的數(shù)值信息。

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

如果解決請采納，沒解決歡迎繼續(xù)提問。

jQuery 多選下拉框插件

插件沒有，不過可以說說原理；設置一個input type=“text" readonly=truebr/select multiple style="display:none"/select,當點擊input的時候，查詢數(shù)據(jù)庫，將值賦值給select并讓select顯示出來，選擇option的時候給input賦值就搞定了。

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

這個插件沒有定義控件的高度的配置，控件也沒有設置高度，依據(jù)內容的高度來確定控件整體高度，你可以給樣式添加高度即可。不過還是修改源代碼來實現(xiàn)高度控制好點，可以隨便配置，而不用統(tǒng)一

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});