jQuery を使用してドロップダウンリストの連携効果を実現する (sharepoint 2007)_jquery

使用シナリオ: たとえば、州を選択すると、対応する都市が下位レベルのリストに表示されます。

1. Jquery-1.4.2.js と jquery.SPServices-0.5.7.js を使用します。

2. メインテーブルとサブテーブルを作成し、対応関係を確立します。

3. リストの NewItem または EditItem ページにコンテンツ エディター Web パーツを追加し、そこにスクリプト コードを追加します。

4. 実装、

dropdownObjコントロール:

cascadeDropdownObj コントロール (このコントロールはスクリプト経由でアタッチされます):

このメソッドはパラメータを渡すことによって単語テーブルのレコードを返します

コードをコピー コードは次のとおりです:

function GetSubDropdown(parameterVal){
cascadeDropdownObj.empty();//最初に下位リストをクリアします
cascadeDropdownObj.append("(None) ");//(なし) 値を追加します
var camlQuery = " ;Where>


"
< /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");//単語 table に対応する値を取得します
//binding 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: //(None) 値を選択した後、下位レベルのリストが最初にクリアされることを示します
cascadeDropdownObj.empty(); >cascadeDropdownObj.append("(None)");

}
}); >