KendoUI - Cascade Isue

Question

私は国 - >国 - >都市を取る簡単なコードをしようとしています。誰かがこの場合の問題点を教えてもらえますか？国のリストはうまくロードされますが、国を選択した後、州はロードされず、イベントも解雇されません。助けてください？状態のための2番目のコンボボックスの定義では

<script> 
     var country = $('#inputCountry option:selected').val(); 
     $(document).ready(function(){ 
      var countries = $("#country").kendoComboBox({ 
       autoBind:false, 
       placeholder: "Select Country", 
       dataTextField: "countryName", 
       suggest:true, 
       dataValueField: "geonameId", 
       dataSource: { 
        transport: { 
         dataType: "json", 
         read: { 
          url: "http://api.geonames.org/countryInfoJSON", 
          data: { 
           username: "kirobo" 
          }, 
          cache:false, 
         } 
        }, 

        schema : { 
         model: { 
          children: "geonames" 
         }, 
         data: function(response) { 
          return response.geonames; 
         } 
        } 
       } 
      }).data("kendoComboBox"); 
      var state = $("#state").kendoComboBox({ 
       autoBind: false, 
       suggest: true, 
       cascadeFrom: "country", 
       placeholder: "Select State", 
       dataTextField: "name", 
       dataValueField: "geonameId", 
       dataSource: { 
        transport: { 
         dataType: "json", 
         read: { 
          url: "http://api.geonames.org/childrenJSON", 
          data: { 
            username: "kirobo", 
            geonameId: getCountry() 
           }, 
          cache:false, 

         }, 
         parameterMap: function(data, type) { 
          return { 
           username: "kirobo", 
           geonameId: getCountry() 
          } 
         } 

        }, 
        cache:false, 
        schema : { 
         data: function(response) { 
          return response.geonames; 
         } 
        } 
       } 
      }).data("kendoComboBox"); 
      var cities = $("#city").kendoComboBox({ 
       suggest:true, 
       autoBind: false, 
       cascadeFrom: "state", 
       placeholder: "Select City", 
       dataTextField: "name", 
       dataValueField: "geonameId", 
       dataSource: { 
        serverFiltering: true, 
        transport: { 
         dataType: "json", 
         read: { 
          url: "http://api.geonames.org/childrenJSON", 
          data: { 
           username: "kirobo", 
           geonameId: getState() 
          }, 
          cache:false, 

         }, 
         parameterMap: function(data, type) { 

          return { 
           username: "kirobo", 
           geonameId: getState() 
          } 
         } 

        }, 

        schema : { 

         data: function(response) { 
          return response.geonames; 
         } 
        } 
       } 
      }).data("kendoComboBox"); 
      function getCountry() { 
       var combo = $("#country").data("kendoComboBox"); 
       return combo.value(); 
      } 

      function getState() { 
       var combo = $("#state").data("kendoComboBox"); 
       return combo.value(); 
      } 
     }); 


    </script> 

Answer 1

、変更：

cascadeFrom: "country" 

cascadeFrom: "countries" 

に 'cascadeFromは、' 親のコンボボックスではなく、そのjQueryのセレクタのための変数の参照を提供します：あなたの最初のComboBoxには、「countries = $（ "＃country"）」ということに注意してください。代わりに、最初のComboBoxを次のように変更することもできます。

var country = $("#country").kendoComboBox({ 

2番目のComboBoxは正しく機能します。それと同じくらい簡単なはずです。

Answer 2

カスケード元フィールドのcombobox要素を使用する代わりに、kendoComboBoxオブジェクトを使用する必要があります。

var countries = $("#country").data(".kendoComboBox"); var state = $("#state").kendoComboBox({ cascadeFrom: "countries" });

あなたはこの国をcascadeFromフィールド内のオブジェクトを使用する必要があります。それでおしまい。