jQuery를 사용하여 드롭다운 목록의 연결 효과 달성(sharepoint 2007)_jquery

사용 시나리오, 예를 들어 지방을 선택하면 해당 도시가 하위 목록에 표시됩니다.

1. Jquery-1.4.2.js 및 jquery.SPServices-0.5.7.js를 사용합니다.

2. 메인 테이블과 서브 테이블을 생성하고 해당 관계를 설정합니다.

3. List의 NewItem 또는 EditItem 페이지에 콘텐츠 편집기 웹파트를 추가한 다음 거기에 스크립트 코드를 추가합니다.

4. 구현

dropdownObj컨트롤:

cascadeDropdownObj 컨트롤(이 컨트롤은 스크립트를 통해 연결됨):

이 메소드는 매개변수를 전달하여 단어 테이블의 레코드를 반환합니다

코드 복사 코드는 다음과 같습니다.

function GetSubDropdown(parameterVal){
cascadeDropdownObj.empty();//처음에 하위 목록 지우기
cascadeDropdownObj.append("(None) ");//(없음) 값 추가
var camlQuery = " ;Where>


" 매개변수Val " /Eq>

";
$().SPServices({
작업: "GetListItems",
비동기: false,
listName: "CascadeSub",
CAMLQuery: camlQuery,
completefunc: function (xData, Status) {
$(xData.responseXML).find("[nodeName=z:row]").each( function() {
var subDropdownVal = $(this).attr("ows_SubDropdownVal");//단어 table에 해당하는 값을 가져옵니다
//subDropdown 바인딩
cascadeDropdownObj.append("");
});
}
});
}
//계단식 '드롭다운'
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: //(없음) 값을 선택한 후 하위 수준 목록이 처음에 지워짐을 나타냅니다.
cascadeDropdownObj.empty(); >cascadeDropdownObj.append("< ;option selected='selected'>(없음)")
break;
}
});