SharePoint 2013 - 級聯下拉字段

Question

我有一個有2個下拉字段的Sharepoint 2013表單。我正在尋找一種方法來填充第二個下拉字段，具體取決於第一個下拉字段中的選擇。

例如，表單將具有狀態下拉字段，後跟城市下拉字段。城市下拉字段僅填充在州下拉字段中選定的州中找到的城市。

任何意見，參考，提示，建議表示讚賞。

謝謝。

Answer 1

它在webpart中做了級聯下拉菜單。我在.ascx中添加了以下代碼。從列表中填充兩個下拉列表值。

該代碼將執行如下操作。第一個下拉菜單從狀態列表中獲取值，並以statementsdl加載。在改變城市功能將被調用，從選定的狀態和負載過濾城市。城市詳情存儲在城市列表中。 （我已經改變了變量名，這是我用我的工作列表名稱。因此，檢查一次。但這個代碼格式是正確的）

<script type="text/javascript" language="javascript"> 
 
ExecuteOrDelayUntilScriptLoaded(statepopulate, "sp.js"); 
 

 
var _ctx = null; 
 
    var _web = null; 
 
    var _allstate = null; 
 
    var _allstate1 = null; 
 
    var _ctx1 = null; 
 
    var _web1 = null; 
 
    var state = null; 
 
    var city = null; 
 
\t 
 

 
function statepopulate() { 
 
     //Get the list 
 
     _ctx = SP.ClientContext.get_current(); 
 
     _web = _ctx.get_web(); 
 
     var list = _web.get_lists().getByTitle("State"); 
 
     //Create the query and get the results 
 
     var query = new SP.CamlQuery(); 
 
     query.set_viewXml("<View><Query><OrderBy><FieldRef Name=\"Title\" /></OrderBy></Query></View>"); 
 
     _allcountry = list.getItems(query); 
 
     _ctx.load(_allstate, 'Include(Title,ID)'); 
 
     _ctx.executeQueryAsync(Function.createDelegate(this, this.statepopulatesuccess), Function.createDelegate(this, this.statepopulatefailed)); 
 

 
    } 
 
    function statepopulatesuccess() { 
 
     //Clear out current entries 
 
     var ddlstate = this.document.getElementById("ddlstate"); 
 
     ddlstate.options.length = 0; 
 
     //Iterate through new entries and populate DDL 
 
     var listEnumerator = _allcountry.getEnumerator(); 
 
     ddlcountry.options[ddlcountry.options.length] = new Option("Select state", 0); 
 
     while (listEnumerator.moveNext()) { 
 
      var currentItem = listEnumerator.get_current(); 
 
      ddlstate.options[ddlcountry.options.length] = new Option(currentItem.get_item("Title"), currentItem.get_item("ID")); 
 

 
     } 
 
    } 
 

 
    function statepopulatefailed() { 
 

 
    } 
 

 

 
    function city() { 
 
     _ctx1 = SP.ClientContext.get_current(); 
 
     _web1 = _ctx1.get_web(); 
 
     state = document.getElementById("ddlstate").value; 
 
     var list1 = _web.get_lists().getByTitle("city"); 
 
     var query1 = new SP.CamlQuery(); 
 
     query1.set_viewXml('<Query><Where><Eq><FieldRef Name=\'ID\' /><Value Type=\'Counter\'>' + state + '</Value></Eq></Where></Query>'); 
 
     _allcity1 = list1.getItems(query1); 
 
     _ctx1.load(_allpractice1, 'Include(state,ID,Title)'); 
 
     _ctx1.executeQueryAsync(Function.createDelegate(this, this.citypopulatesuccess), Function.createDelegate(this, this.citypopulatefailed)); 
 

 
    } 
 

 

 
    function citypopulatesuccess() { 
 
     var ddlcity = this.document.getElementById("ddlcity"); 
 
     ddlcity.options.length = 0; 
 
     var listEnumerator = _allcity1.getEnumerator(); 
 
     while (listEnumerator.moveNext()) { 
 
      var currentItem = listEnumerator.get_current(); 
 
      if (state == currentItem.get_item("ID")) { 
 
       for (var i = 0; i < currentItem.get_item("state").length; i++) { 
 
        ddlcity.options[ddlcity.options.length] = new Option(currentItem.get_item("Title")[i], currentItem.get_item("ID")[i]); 
 
        
 
       } 
 
      } 
 
     } 
 
    } 
 

 
    function citypopulatefailed() { 
 
     alert("failes"); 
 
    } 
 

 

 
</script>

<td class="" align="left"> 
 
     
 
      State<sup class= "supspt">*</sup></td> 
 
     <td class="style2" align="left"> 
 
     <div class="boxid1"><select id="ddlstate" class="selectclass" onChange="city();"></select> 
 
      
 
      </div></td> 
 
    </tr> 
 

 
<tr> 
 
     <td class="style3" align="left"> 
 
     
 
      City<sup class= "supspt">*</sup></td> 
 
     <td class="style2" align="left"> 
 
     <div class="boxid1"><select id="ddlcity" class="selectclass"><Option>Select City</option></select> 
 
      
 
      </div></td> 
 
    </tr>