使用jQuery實(shí)現(xiàn)dropdownlist的聯(lián)動(dòng)效果(sharepoint 2007)
更新時(shí)間：2011年03月30日 23:46:44 作者：
在sharepoint 2007網(wǎng)站中，使用jQuery實(shí)現(xiàn)dropdownlist的聯(lián)動(dòng)效果.
使用場(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ì)于字表的記錄
復(fù)制代碼 代碼如下:
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)寫(xiě)法
相關(guān)文章
今天小編就為大家分享一篇關(guān)于jquery層次選擇器的介紹，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
jquery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)顯示下劃線的漸變下拉菜單效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)顯示下劃線的漸變下拉菜單效果代碼,涉及jquery插件SuperSlide.2.1.js實(shí)現(xiàn)滑動(dòng)切換效果的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
jQuery 使用on綁定動(dòng)態(tài)生成的元素時(shí)，不能直接用該對(duì)象操作，而是選擇其非動(dòng)態(tài)生成的父節(jié)點(diǎn)然后再找到本身才能達(dá)到效果。大家看看源碼就知道了。2015-04-04
Easyui 關(guān)閉jquery-easui tab標(biāo)簽頁(yè)前觸發(fā)事件的解決方法
這篇文章主要介紹了Easyui 關(guān)閉jquery-easui tab標(biāo)簽頁(yè)前觸發(fā)事件 ,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
jQuery側(cè)邊欄隨窗口滾動(dòng)實(shí)現(xiàn)方法
jQuery側(cè)邊欄隨窗口滾動(dòng)實(shí)現(xiàn)方法，需要的朋友可以參考一下2013-03-03
這篇文章主要介紹了JQuery選擇器綁定事件及修改內(nèi)容的方法,涉及bind()、show()、hide()、html()等方法的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章介紹了jQuery中獲取Radio元素值的方法，有需要的朋友可以參考一下2013-07-07
本文主要是介紹了jQuery中on方法及trigger方法，以及圍繞這個(gè)方法來(lái)體驗(yàn)的觀察者模式，是篇非常不錯(cuò)的文章，對(duì)我們理解觀察者模式很有幫助。2014-12-12
通過(guò)Ajax使用FormData對(duì)象無(wú)刷新上傳文件方法
這篇文章主要介紹了通過(guò)Ajax使用FormData對(duì)象無(wú)刷新上傳文件方法，具有一定的參考價(jià)值，感興趣的朋友可以了解一下。2016-12-12
jquery如何改變html標(biāo)簽的樣式(兩種實(shí)現(xiàn)方法)
對(duì)于如何修飾html標(biāo)簽，這對(duì)于js來(lái)說(shuō)，可以通過(guò)setAttribute來(lái)設(shè)置標(biāo)簽的屬性，通過(guò)getAttribute來(lái)得到標(biāo)簽的屬性，而在jq中當(dāng)然也可以實(shí)現(xiàn)類(lèi)似的功能，方法上肯定比js要簡(jiǎn)化多了,接下來(lái)介紹實(shí)現(xiàn)方法，感興趣的朋友可以了解下2013-01-01