使用jQuery實(shí)現(xiàn)dropdownlist的聯(lián)動(dòng)效果(sharepoint 2007)
使用場(chǎng)景,比如,選中某個(gè)省份,然后下級(jí)列表中會(huì)顯示對(duì)應(yīng)的城市。
1.使用Jquery-1.4.2.js和jquery.SPServices-0.5.7.js。
2.創(chuàng)建主表和子表,建立對(duì)應(yīng)關(guān)系。
3.在List的NewItem或者EditItem page中添加Content Editor Webpart,然后在其中添加腳本代碼。
4.實(shí)現(xiàn),
dropdownObj控件:
cascadeDropdownObj控件(該控件是通過(guò)腳本附加的):
該方法是通過(guò)傳入?yún)?shù),來(lái)返回對(duì)于字表的記錄
function GetSubDropdown(parameterVal){
cascadeDropdownObj.empty();//對(duì)下級(jí)列表進(jìn)行清空初始
cascadeDropdownObj.append("<option selected='selected'>(None)</option>");//添加一個(gè)(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");//獲取字表對(duì)應(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)值之后,對(duì)下級(jí)列表進(jìn)行清空初始
cascadeDropdownObj.empty();
cascadeDropdownObj.append("<option selected='selected'>(None)</option>");
break;
}
});
- Yii2使用dropdownlist實(shí)現(xiàn)地區(qū)三級(jí)聯(lián)動(dòng)功能的方法
- asp.net DropDownList實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果
- ASP.NET中DropDownList和ListBox實(shí)現(xiàn)兩級(jí)聯(lián)動(dòng)功能
- DropDownList綁定數(shù)據(jù)表實(shí)現(xiàn)兩級(jí)聯(lián)動(dòng)示例
- 下拉列表多級(jí)聯(lián)動(dòng)dropDownList示例代碼
- asp.net省市三級(jí)聯(lián)動(dòng)的DropDownList+Ajax的三種框架(aspnet/Jquery/ExtJs)示例
- Jquery實(shí)現(xiàn)無(wú)刷新DropDownList聯(lián)動(dòng)實(shí)現(xiàn)代碼
- asp.net DropDownList 三級(jí)聯(lián)動(dòng)下拉菜單實(shí)現(xiàn)代碼
- dropdownlist之間的互相聯(lián)動(dòng)實(shí)現(xiàn)(顯示與隱藏)
- yii2中dropDownList實(shí)現(xiàn)二級(jí)和三級(jí)聯(lián)動(dòng)寫法
相關(guān)文章
jQuery ajax dataType值為text json探索分享
ajax dataType值為text json的使用是怎么樣的,在本文將為大家想你想介紹下,感興趣的朋友不要錯(cuò)過(guò)2013-09-09那些年,我還在學(xué)習(xí)jquery 學(xué)習(xí)筆記
那些年學(xué)習(xí)了一些基本的web開發(fā)知識(shí),其中已經(jīng)有javascript語(yǔ)言了,為什么還要學(xué)習(xí)Jquery啊2012-03-03jQuery實(shí)現(xiàn)HTML表格單元格的合并功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)HTML表格單元格的合并功能,可合并指定行與指定列上的單元格,涉及jQuery針對(duì)表格元素屬性的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2016-04-04JQuery實(shí)現(xiàn)的購(gòu)物車功能(可以減少或者添加商品并自動(dòng)計(jì)算價(jià)格)
這篇文章主要介紹了JQuery實(shí)現(xiàn)的購(gòu)物車功能(可以減少或者添加商品并自動(dòng)計(jì)算價(jià)格),本文的這個(gè)模擬實(shí)現(xiàn)的購(gòu)物車難登大雅之堂,但是可以從中得到一些啟發(fā)或者相關(guān)的知識(shí)點(diǎn),需要的朋友可以參考下2015-01-01基于JavaScript如何實(shí)現(xiàn)ajax調(diào)用后臺(tái)定義的方法
由于ajax的獨(dú)特優(yōu)勢(shì),使得它在當(dāng)前大量網(wǎng)站得到了廣泛的應(yīng)用,下面就介紹一下ajax如何調(diào)用后臺(tái)定義的函數(shù),對(duì)ajax調(diào)用后臺(tái)方法相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12jQuery實(shí)現(xiàn)數(shù)秒后自動(dòng)提交form的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)數(shù)秒后自動(dòng)提交form的方法,實(shí)例分析了jQuery實(shí)現(xiàn)form表單延時(shí)提交的技巧,需要的朋友可以參考下2015-03-03jquery選擇器、屬性設(shè)置用法經(jīng)驗(yàn)總結(jié)
最近做項(xiàng)目用到了jquery。在做的過(guò)程中走了很多彎路,不停的搜索??偨Y(jié)出了一些jquery選擇器、屬性設(shè)置用法,供大家參考2013-09-09jQuery實(shí)現(xiàn)帶有上下控制按鈕的簡(jiǎn)單多行滾屏效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶有上下控制按鈕的簡(jiǎn)單多行滾屏效果代碼,涉及jquery鼠標(biāo)事件控制頁(yè)面翻頁(yè)滾動(dòng)效果的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09jquery動(dòng)態(tài)添加元素事件失效問(wèn)題解決方法
當(dāng)使用腳本動(dòng)態(tài)添加元素xxx時(shí),但事件失效,最后使用jquery中on方法解決腳本動(dòng)態(tài)添加元素,需要的朋友可以參考下2014-05-05