Home > Web Front-end > JS Tutorial > Use jQuery to achieve the linkage effect of dropdownlist (sharepoint 2007)_jquery

Use jQuery to achieve the linkage effect of dropdownlist (sharepoint 2007)_jquery

WBOY
Release: 2016-05-16 18:09:00
Original
1264 people have browsed it

Usage scenario, for example, select a province, and then the corresponding city will be displayed in the lower-level list.

1. Use Jquery-1.4.2.js and jquery.SPServices-0.5.7.js.

2. Create the main table and sub-table and establish the corresponding relationship.

3. Add Content Editor Webpart in List’s NewItem or EditItem page, and then add script code there.

4. Implementation,

dropdownObjControl:

cascadeDropdownObj control (this control is attached via script):

This method returns the records of the word table by passing in parameters

Copy code The code is as follows:

function GetSubDropdown(parameterVal){
cascadeDropdownObj.empty();//Initially clear the subordinate list
cascadeDropdownObj.append("");//Add a (None) value
var camlQuery = "
< ;Where>


" parameterVal "
< /Eq>

";
$().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");//Get the value corresponding to the word table
//binding subDropdown
cascadeDropdownObj.append("");
});
}
});
}
//cascading 'Dropdown'
dropdownObj.change(function(){
var dropdownSelectTextObj = $("select[title$='Dropdown'] option:selected");//Get the current selected value
switch(dropdownSelectTextObj.text()){
case "L1":
GetSubDropdown("L1");
break;
case "L2":
GetSubDropdown("L2");
break;
case "PL1":
GetSubDropdown ("PL1");
break;
default: //Indicates that after selecting the (None) value, the lower-level list is initially cleared
cascadeDropdownObj.empty();
cascadeDropdownObj.append("< ;option selected='selected'>(None)");
break;
}
});
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template