1つのデータソースを持つ複数のドロップダウンリスト剣道

セキュリティに関する質問を含む5つのドロップダウンリストを提供するページがあります。それらは、ローカルのDataSourceオブジェクトを介して設定されます。これは、オブジェクト内の基本的に10個の質問です。私はすべての5つのドロップダウンリストを同じDataSourceにバインドしたいのですが、1つの質問が選択されているので、それをDataSourceから削除して、次の質問のために選択することはできません。ここに私のコードは、これまでのところです：1つのデータソースを持つ複数のドロップダウンリスト剣道

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

望ましい行動を達成するために、あなたはそれ以外の場合は、各DropDownListコントロールのために別々にそれらをフィルタリングすることができなくなり、同じデータが、別々のDataSourceインスタンスを使用することができます。

ここでは、出発点として使用してシナリオに合わせてさらにカスタマイズできる例を示します。

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

1つのデータソースを持つ複数のドロップダウンリスト剣道

答えて

関連する問題