javascript - kendo ui dropdownlist-如何进行手动级联？

Question

所以我目前正在尝试调整一些以前的代码以与动态下拉列表一起使用，问题似乎是 cascadeFrom 属性只需要一个 id。所以我需要使用另一种选择。这是我的代码:

       fieldsDiv.html(dynForms + dynFormFields);

       var appendedForms=fieldsDiv.find(".dynamicForms");
       var appendedFormFields= fieldsDiv.find(".dynamicFormFields");


       debugger;
       $(appendedForms).kendoDropDownList({
           dataTextField: "name",
           dataValueField: "id",
           dataSource: {
               type: "json",
               serverFiltering: true,
               transport: {
                   read: "${pageContext.request.contextPath}" + "/newlayout/mySearchesDynForms.do"
               }

       }});
       $(appendedFormFields).kendoDropDownList({
           dataTextField: "name",
           dataValueField: "id",
           dataSource: {
               type: "json",
               serverFiltering:true,
               transport: {

                   read:{
                       url:"${pageContext.request.contextPath}" + "/newlayout/mySearchesFormFieds.do",
                       data:function(){
                           return {formId:  $(appendedForms).val()
                           };
                       }
                   }
               }
           },
           cascadeFrom:  "appendedFormFields"
       });

如何使用与第二个下拉列表匹配的 dom 对象进行级联？我看过这段代码:

    function OnChangeOfParentCombo(e){
 var child = $('#ChildCombo').data().kendoComboBox;
 child.enable(true);
 child.dataSource.read({myFilter:this.value()});}

, here ，但我没有了解如何适应我的情况。

我的想法是这样的:

 $(appendedForms).kendoDropDownList({
       dataTextField: "name",
       dataValueField: "id",
       dataSource: {
           type: "json",
           serverFiltering: true,
           transport: {
               read: "${pageContext.request.contextPath}" + "/newlayout/mySearchesDynForms.do"
           },
       change:function(){
             var formId = this.val()
             appendedFormFields.val("").data("kendoDropDownList").text("");
             var formFields = $(appendedFormFields).data("kendoDropDownList");
             formFields.dataSource.read({ formId: formId });               
       }
   }});
   $(appendedFormFields).kendoDropDownList({
       dataTextField: "name",
       dataValueField: "id",
       dataSource: {
           type: "json",
           serverFiltering:true,
           transport: {
               read:{
                   url:"${pageContext.request.contextPath}" + "/newlayout/mySearchesFormFieds.do",
                   data:function(){
                       return {formId:  $(appendedForms).val()
                       };
                   }
               }
           }
       }
   });

第二个下拉列表 (appendedFormFields) 的数据函数中的属性 formId 是否需要匹配 formFields.dataSource.read({ formId: formId });从第一个改变函数？

Answer 1

如果没有为“dropdown1”选择正确的值，则添加一个更改事件或者尝试一个 onclose 事件

在该更改事件上获取所选项目的值

var advertiserId = $("#AdvertiserDDL").val();

清空“dropdown2”的内容，重新读取数据源

$("#OpportunityDDL").val("").data("kendoDropDownList").text("");

    var opportunity = $("#OpportunityDDL").data("kendoDropDownList");
    opportunity.dataSource.read({ Id: advertiserId });

编辑:我认为在第一个 ddl 的更改事件上调用 JS 函数更清晰

 $(appendedForms).kendoDropDownList({...

   change:function(){
     YourFunction();
}
     YourFunction() {
         var ddlID = appendedForms.val()
         appendedFormFields.val("").data("kendoDropDownList").text("");
         var formFields = $(appendedFormFields).data("kendoDropDownList");
         formFields.dataSource.read({ formId: ddlID });  
       }

不，您可以随意命名该属性，只需确保数据函数的属性与 Controller 中的参数匹配即可。为了安全起见，我制作了 .dataSource.read({ formId: ddlID }); 不同的变量