SharePoint 2013 - Каскадные поля выпадающего списка

Question

У меня есть форму Sharepoint 2013, которая имеет 2 раскрывающихся поля. Я ищу способ заполнить второе поле выпадающего меню в зависимости от выбора в первом раскрывающемся поле.

Например, у формы должно быть поле выпадающего состояния, за которым следует поле выпадающего города. Поле выпадающего меню City заполняется только городами, найденными в состоянии, выбранном в поле выпадающего списка State.

Любые комментарии, рекомендации, советы, рекомендации.

Спасибо.

Answer 1

Он сделал каскадирование выпадающего списка в веб-части. Я добавил следующий код в мой .ascx. Два списка выпадающих списков заполняются из списка.

Код будет действовать следующим образом. Первый выпадающий список принимает значения из списка состояний и нагрузки в объявленииdl. При изменении функции города будет вызываться с фильтрами города из выбранного состояния и загрузки. Данные города хранятся в списке городов. (Я изменил имя переменной, имя списка, который я использовал для моей работы. Так проверьте один раз. Но этот формат код правильный)

<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>