多個下拉列表與一個DataSource Kendo

我有一個頁面，提供用戶5下拉列表與安全問題。它們通過本地DataSource對象進行設置，這基本上是對象中的10個問題。我想將所有5個下拉列表綁定到相同的DataSource，並且選擇一個Question，將其從DataSource中移除，因此您無法爲下一個問題選擇它。這是我到目前爲止的代碼：多個下拉列表與一個DataSource Kendo

var questions = 
     [{ 
      value: "Your first pet\'s name?" 
     }, 
      { 
       value: "Your favorite teacher?" 
      }, 
      { 
       value: "The city you were born in?" 
      }, 
      { 
       value: "Your mother\'s maiden name?" 
      }, 
      { 
       value: "The high school you attended?" 
      }, 
      { 
       value: "First name of the first person you kissed?" 
      }, 
      { 
       value: "What did you want to be when you grow up?" 
      }, 
      { 
       value: "The brand of your first car?" 
      }, 
      { 
       value: "Your favorite city?" 
      }]; 
    var localDataSource = new kendo.data.DataSource({ 
     data: questions 
    }); 
    var dropdown = $('.dropdownlist'); 
     dropdown.kendoDropDownList({ 
      dataTextField: "value", 
      dataValueField: "value", 
      dataSource: localDataSource 
     });

而我的HTML渲染領域：

<input class="dropdownlist w250px" name="questions[1][question]" />

時報5的每一個問題。

來源

2016-11-29 Mihail Ivanchev

爲了達到所期望的行爲，你可以使用相同的數據，但獨立的DataSource實例，否則你將不能夠以不同的方式過濾它們每個的DropDownList。

下面是一個示例，您可以使用該示例作爲起點並進一步對其進行自定義以符合您的方案。

http://dojo.telerik.com/aJeHa

使用的API包括：

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>Related Kendo UI DropDownLists</title> 
 

 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css"> 
 

 
    <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script> 
 
    </head> 
 
    <body> 
 

 
    <p><input id="ddl1" name="ddl1" class="related-dropdown" /></p> 
 
    <p><input id="ddl2" name="ddl2" class="related-dropdown" /></p> 
 
    <p><input id="ddl3" name="ddl3" class="related-dropdown" /></p> 
 

 
    <script> 
 

 
     var data = [ 
 
     { id: 1, text: "question 1" }, 
 
     { id: 2, text: "question 2" }, 
 
     { id: 3, text: "question 3" } 
 
     ]; 
 

 
     for (var j = 1; j <= data.length; j++) { 
 
     $("#ddl" + j).kendoDropDownList({ 
 
      dataSource: { 
 
      data: data, 
 
      filter: {} 
 
      }, 
 
      dataTextField: "text", 
 
      dataValueField: "id", 
 
      optionLabel: "Select a question", 
 
      change: onChange 
 
     }); 
 
     } 
 

 
     function onChange(e) { 
 
     if (e.sender.value()) { 
 
      var otherDropDowns = $("input.related-dropdown").not(e.sender.element); 
 
      for (var j = 0; j < otherDropDowns.length; j++) { 
 
      var ddl = $(otherDropDowns[j]).data("kendoDropDownList"); 
 
      var newCondition = { field: "id", operator: "neq", value: e.sender.value() }; 
 
      var currentFilter = ddl.dataSource.filter(); 
 
      if (currentFilter && currentFilter.filters) { 
 
       currentFilter.filters.push(newCondition); 
 
       ddl.dataSource.filter(currentFilter); 
 
      } else { 
 
       ddl.dataSource.filter(newCondition); 
 
      } 
 
      } 
 
     } else { 
 
      // clear the freed question from the DropDownLists' filter criteria 
 
     } 
 
     } 
 

 
    </script> 
 

 
    </body> 
 
</html>

來源

2016-11-29 16:31:50 dimodi

多個下拉列表與一個DataSource Kendo

回答

相關問題