使用jQuery實現(xiàn)dropdownlist的聯(lián)動效果(sharepoint 2007)
使用場景,比如,選中某個省份,然后下級列表中會顯示對應的城市。
1.使用Jquery-1.4.2.js和jquery.SPServices-0.5.7.js。
2.創(chuàng)建主表和子表,建立對應關系。
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");//獲取字表對應的值
//binding subDropdown
cascadeDropdownObj.append("<option>"+subDropdownVal+"</option>");
});
}
});
}
//cascading 'Dropdown'
dropdownObj.change(function(){
var dropdownSelectTextObj = $("select[title$='Dropdown'] option:selected");//獲取當前選中值
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)動寫法
相關文章
jQuery ajax dataType值為text json探索分享
ajax dataType值為text json的使用是怎么樣的,在本文將為大家想你想介紹下,感興趣的朋友不要錯過2013-09-09JQuery實現(xiàn)的購物車功能(可以減少或者添加商品并自動計算價格)
這篇文章主要介紹了JQuery實現(xiàn)的購物車功能(可以減少或者添加商品并自動計算價格),本文的這個模擬實現(xiàn)的購物車難登大雅之堂,但是可以從中得到一些啟發(fā)或者相關的知識點,需要的朋友可以參考下2015-01-01基于JavaScript如何實現(xiàn)ajax調(diào)用后臺定義的方法
由于ajax的獨特優(yōu)勢,使得它在當前大量網(wǎng)站得到了廣泛的應用,下面就介紹一下ajax如何調(diào)用后臺定義的函數(shù),對ajax調(diào)用后臺方法相關知識感興趣的朋友一起學習吧2015-12-12jQuery實現(xiàn)數(shù)秒后自動提交form的方法
這篇文章主要介紹了jQuery實現(xiàn)數(shù)秒后自動提交form的方法,實例分析了jQuery實現(xiàn)form表單延時提交的技巧,需要的朋友可以參考下2015-03-03jQuery實現(xiàn)帶有上下控制按鈕的簡單多行滾屏效果代碼
這篇文章主要介紹了jQuery實現(xiàn)帶有上下控制按鈕的簡單多行滾屏效果代碼,涉及jquery鼠標事件控制頁面翻頁滾動效果的相關實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09