在sharepoint 2007网站中,使用jQuery实现dropdownlist的联动效果
时间:2011-03-30 来源:St~even
使用场景,比如,选中某个省份,然后下级列表中会显示对应的城市。
1.使用Jquery-1.4.2.js和jquery.SPServices-0.5.7.js。
2.创建主表和子表,建立对应关系。
3.在List的NewItem或者EditItem page中添加Content Editor Webpart,然后在其中添加脚本代码。
4.实现,
dropdownObj控件:
cascadeDropdownObj控件(该控件是通过脚本附加的):
该方法是通过传入参数,来返回对于字表的记录
  function GetSubDropdown(parameterVal){
  cascadeDropdownObj.empty();//对下级列表进行清空初始
  cascadeDropdownObj.append("<option selected='selected'>(None)</option>");//添加一个(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");//获取字表对应的值
        //binding subDropdown
      cascadeDropdownObj.append("<option>"+subDropdownVal+"</option>");    
   });
     }
    });
}
  //cascading 'Dropdown'
  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("<option selected='selected'>(None)</option>");
    break;
   }
  });










