使用jQuery實現(xiàn)dropdownlist的聯(lián)動效果(sharepoint 2007)
使用場景,比如,選中某個省份,然后下級列表中會顯示對應(yīng)的城市。
1.使用Jquery-1.4.2.js和jquery.SPServices-0.5.7.js。
2.創(chuàng)建主表和子表,建立對應(yīng)關(guān)系。
3.在List的NewItem或者EditItem page中添加Content Editor Webpart,然后在其中添加腳本代碼。
4.實現(xiàn),
dropdownObj控件:
cascadeDropdownObj控件(該控件是通過腳本附加的):
該方法是通過傳入?yún)?shù),來返回對于字表的記錄
function GetSubDropdown(parameterVal){
cascadeDropdownObj.empty();//對下級列表進行清空初始
cascadeDropdownObj.append("<option selected='selected'>(None)</option>");//添加一個(None)值
var camlQuery = "<Query xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
<Where> \
<Eq> \
<FieldRef Name='Title' /> \
<Value Type='Text'>"+parameterVal+"</Value> \
</Eq> \
</Where> \
</Query>";
$().SPServices({
operation: "GetListItems",
async: false,
listName: "CascadeSub",
CAMLQuery: camlQuery,
completefunc: function (xData, Status) {
$(xData.responseXML).find("[nodeName=z:row]").each(function() {
var subDropdownVal = $(this).attr("ows_SubDropdownVal");//獲取字表對應(yīng)的值
//binding subDropdown
cascadeDropdownObj.append("<option>"+subDropdownVal+"</option>");
});
}
});
}
//cascading 'Dropdown'
dropdownObj.change(function(){
var dropdownSelectTextObj = $("select[title$='Dropdown'] option:selected");//獲取當(dāng)前選中值
switch(dropdownSelectTextObj.text()){
case "L1":
GetSubDropdown("L1");
break;
case "L2":
GetSubDropdown("L2");
break;
case "PL1":
GetSubDropdown("PL1");
break;
default: //表示選中(None)值之后,對下級列表進行清空初始
cascadeDropdownObj.empty();
cascadeDropdownObj.append("<option selected='selected'>(None)</option>");
break;
}
});
- Yii2使用dropdownlist實現(xiàn)地區(qū)三級聯(lián)動功能的方法
- asp.net DropDownList實現(xiàn)二級聯(lián)動效果
- ASP.NET中DropDownList和ListBox實現(xiàn)兩級聯(lián)動功能
- DropDownList綁定數(shù)據(jù)表實現(xiàn)兩級聯(lián)動示例
- 下拉列表多級聯(lián)動dropDownList示例代碼
- asp.net省市三級聯(lián)動的DropDownList+Ajax的三種框架(aspnet/Jquery/ExtJs)示例
- Jquery實現(xiàn)無刷新DropDownList聯(lián)動實現(xiàn)代碼
- asp.net DropDownList 三級聯(lián)動下拉菜單實現(xiàn)代碼
- dropdownlist之間的互相聯(lián)動實現(xiàn)(顯示與隱藏)
- yii2中dropDownList實現(xiàn)二級和三級聯(lián)動寫法
相關(guān)文章
jQuery ajax dataType值為text json探索分享
ajax dataType值為text json的使用是怎么樣的,在本文將為大家想你想介紹下,感興趣的朋友不要錯過2013-09-09那些年,我還在學(xué)習(xí)jquery 學(xué)習(xí)筆記
那些年學(xué)習(xí)了一些基本的web開發(fā)知識,其中已經(jīng)有javascript語言了,為什么還要學(xué)習(xí)Jquery啊2012-03-03JQuery實現(xiàn)的購物車功能(可以減少或者添加商品并自動計算價格)
這篇文章主要介紹了JQuery實現(xiàn)的購物車功能(可以減少或者添加商品并自動計算價格),本文的這個模擬實現(xiàn)的購物車難登大雅之堂,但是可以從中得到一些啟發(fā)或者相關(guān)的知識點,需要的朋友可以參考下2015-01-01基于JavaScript如何實現(xiàn)ajax調(diào)用后臺定義的方法
由于ajax的獨特優(yōu)勢,使得它在當(dāng)前大量網(wǎng)站得到了廣泛的應(yīng)用,下面就介紹一下ajax如何調(diào)用后臺定義的函數(shù),對ajax調(diào)用后臺方法相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-12-12jQuery實現(xiàn)數(shù)秒后自動提交form的方法
這篇文章主要介紹了jQuery實現(xiàn)數(shù)秒后自動提交form的方法,實例分析了jQuery實現(xiàn)form表單延時提交的技巧,需要的朋友可以參考下2015-03-03jquery選擇器、屬性設(shè)置用法經(jīng)驗總結(jié)
最近做項目用到了jquery。在做的過程中走了很多彎路,不停的搜索。總結(jié)出了一些jquery選擇器、屬性設(shè)置用法,供大家參考2013-09-09jQuery實現(xiàn)帶有上下控制按鈕的簡單多行滾屏效果代碼
這篇文章主要介紹了jQuery實現(xiàn)帶有上下控制按鈕的簡單多行滾屏效果代碼,涉及jquery鼠標(biāo)事件控制頁面翻頁滾動效果的相關(guān)實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09