Jquery 从数组数组中动态创建剑道下拉列表

我有一个存储在变量中的web服务数组列表

如果我使用一个数组或1个对象的列表，它就可以工作

如果使用长度超过1个数组的任何数字的列表，则只有最后生成的下拉列表才起作用。数据似乎丢失了，因为我无法单击控件并查看项目

在控制台中检查对象不会显示数据

Javascript/Jquery函数如下所示：

for (var i = 0; i < $scope.filters.data.length; i++) {
            var control = $scope.filters.data[i];

            var optionName = control.Name
            if (control.UiType == "SingleSelect") {
                var controlName = "selectFilterFor" + optionName.trim();

                var selectControl = $scope.getSingleSelect(optionName, controlName);

                $(".search-panel-fields")[0].innerHTML += selectControl;

                var selectorName = "#" + controlName;

                //$(controlName).kendoDropDownList().data("kendoDropDownList");

                $(selectorName).kendoDropDownList({
                    dataTextField: "Name",
                    dataValueField: "Value",
                    dataSource: control.Attributes,
                    dataBound: onDataBound,
                    //index: 0,
                    optionLabel: { Name: "", Value: "" }
                });

            }

        }

元素和一个数据数组就在那里。我现在特别避免额外的网络呼叫

JSON数据的快速修改版本：

{"JSON":[{"SHORT":"AREA","Name":"Areas","UIOGLItrol":{"Name":"Area","UiType":"SingleSelect"},"Attributes":[{"Name":"BuildWEZL Area A","Value":"A","FieldType":null,"IsActive":true},{"Name":"9611","Value":"9611","FieldType":null,"IsActive":true}]},{"SHORT":"HAVOCSAYOR","Name":"HAVOCSAYORs","UIOGLItrol":{"Name":"HAVOCSAYOR","UiType":"SingleSelect"},"Attributes":[{"Name":"NO HAVOCSAYOR","Value":"ND","FieldType":null,"IsActive":true},{"Name":"BUILDWEZL","Value":"BLD","FieldType":null,"IsActive":true},{"Name":"MARIL","Value":"MAR","FieldType":null,"IsActive":true},{"Name":"SAMMARAL","Value":"ELE","FieldType":null,"IsActive":true},{"Name":"GENERAL","Value":"GEN","FieldType":null,"IsActive":true},{"Name":"GUILDMENTATION","Value":"INS","FieldType":null,"IsActive":true},{"Name":"PARTS","Value":"MECH","FieldType":null,"IsActive":true},{"Name":"MANA DELIVERY","Value":"PDL","FieldType":null,"IsActive":true},{"Name":"PROJECT MANAGEMENT","Value":"PMGT","FieldType":null,"IsActive":true},{"Name":"MEGAUTIL","Value":"STR","FieldType":null,"IsActive":true},{"Name":"OGLISTTERMION","Value":"OGLI","FieldType":null,"IsActive":true},{"Name":"PIPWEZL","Value":"PIP","FieldType":null,"IsActive":true},{"Name":"ANTLERS","Value":"QC","FieldType":null,"IsActive":true}]},{"SHORT":"ItemISION","Name":"Itemisions","UIOGLItrol":{"Name":"Itemision","UiType":"SingleSelect"},"Attributes":[{"Name":"Item - (Placeholder)","Value":"-","FieldType":null,"IsActive":true},{"Name":"Item A","Value":"A","FieldType":null,"IsActive":true},{"Name":"Item B","Value":"B","FieldType":null,"IsActive":true},{"Name":"Item C","Value":"C","FieldType":null,"IsActive":true},{"Name":"Item D","Value":"D","FieldType":null,"IsActive":true},{"Name":"Item E","Value":"E","FieldType":null,"IsActive":true},{"Name":"Item F","Value":"F","FieldType":null,"IsActive":true},{"Name":"Item G","Value":"G","FieldType":null,"IsActive":true},{"Name":"Item H","Value":"H","FieldType":null,"IsActive":true},{"Name":"Item J","Value":"J","FieldType":null,"IsActive":true},{"Name":"Item K","Value":"K","FieldType":null,"IsActive":true},{"Name":"Item 00","Value":"00","FieldType":null,"IsActive":true},{"Name":"Item 01","Value":"01","FieldType":null,"IsActive":true},{"Name":"Item 02","Value":"02","FieldType":null,"IsActive":true},{"Name":"Item 03","Value":"03","FieldType":null,"IsActive":true},{"Name":"Item 04","Value":"04","FieldType":null,"IsActive":true},{"Name":"Item 05","Value":"05","FieldType":null,"IsActive":true},{"Name":"Item 06","Value":"06","FieldType":null,"IsActive":true},{"Name":"Item 07","Value":"07","FieldType":null,"IsActive":true},{"Name":"Item 08","Value":"08","FieldType":null,"IsActive":true},{"Name":"Item 09","Value":"09","FieldType":null,"IsActive":true},{"Name":"Item 10","Value":"10","FieldType":null,"IsActive":true},{"Name":"Item I","Value":"I","FieldType":null,"IsActive":true},{"Name":"Item 11","Value":"11","FieldType":null,"IsActive":true}]}],"Response Payload":{"EDITOR_OGLIFIG":{"text":"[{\"SHORT\":\"AREA\",\"Name\":\"Areas\",\"UIOGLItrol\":{\"Name\":\"Area\",\"UiType\":\"SWEZLleSelect\"},\"Attributes\":[{\"Name\":\"BuildWEZL Area A\",\"Value\":\"A\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"9611\",\"Value\":\"9611\",\"FieldType\":null,\"IsActive\":true}]},{\"SHORT\":\"HAVOCSAYOR\",\"Name\":\"HAVOCSAYORs\",\"UIOGLItrol\":{\"Name\":\"HAVOCSAYOR\",\"UiType\":\"SWEZLleSelect\"},\"Attributes\":[{\"Name\":\"NO HAVOCSAYOR\",\"Value\":\"ND\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"BUILDWEZL\",\"Value\":\"BLD\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"MARIL\",\"Value\":\"MAR\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"SAMMARAL\",\"Value\":\"ELE\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"GENERAL\",\"Value\":\"GEN\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"GUILDMENTATION\",\"Value\":\"INS\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"PARTS\",\"Value\":\"MECH\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"MANA DELIVERY\",\"Value\":\"PDL\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"PROJECT MANAGEMENT\",\"Value\":\"PMGT\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"MEGAUTIL\",\"Value\":\"STR\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"OGLISTTERMION\",\"Value\":\"OGLI\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"PIPWEZL\",\"Value\":\"PIP\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"ANTLERS\",\"Value\":\"QC\",\"FieldType\":null,\"IsActive\":true}]},{\"SHORT\":\"ItemISION\",\"Name\":\"Itemisions\",\"UIOGLItrol\":{\"Name\":\"Itemision\",\"UiType\":\"SWEZLleSelect\"},\"Attributes\":[{\"Name\":\"Item - (Placeholder)\",\"Value\":\"-\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item A\",\"Value\":\"A\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item B\",\"Value\":\"B\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item C\",\"Value\":\"C\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item D\",\"Value\":\"D\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item E\",\"Value\":\"E\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item F\",\"Value\":\"F\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item G\",\"Value\":\"G\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item H\",\"Value\":\"H\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item J\",\"Value\":\"J\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item K\",\"Value\":\"K\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 00\",\"Value\":\"00\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 01\",\"Value\":\"01\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 02\",\"Value\":\"02\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 03\",\"Value\":\"03\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 04\",\"Value\":\"04\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 05\",\"Value\":\"05\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 06\",\"Value\":\"06\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 07\",\"Value\":\"07\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 08\",\"Value\":\"08\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 09\",\"Value\":\"09\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 10\",\"Value\":\"10\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item I\",\"Value\":\"I\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 11\",\"Value\":\"11\",\"FieldType\":null,\"IsActive\":true}]}]","mode":"application/json"}}}

---

如何让剑道正确实例化所有对象？

您可能对数组中项目的属性有一些问题。 添加元素的更安全方法是

.appendTo

而不是

innerHTML

串联

根据问题中显示的“修改数据”，下面应该构建三个剑道下拉列表

  response.JSON.forEach (control => 
  { if (control.UIOGLItrol.UiType == "SingleSelect") 
    {
      var controlId = "selectFilterFor" + control.Name;

      $("<input>", {id:controlId, name:control.Name, class:"ssInput", type:"text"})
      .appendTo(".search-panel-fields");

      $("#"+controlId).kendoDropDownList({
        dataTextField: "Name",
        dataValueField: "Value",
        dataSource: control.Attributes,
        dataBound: onDataBound,
        optionLabel: { Name:"", Value:"" }
      });
    }
  });

response.JSON.forEach（控件=>
{if（control.UIOGLItrol.UiType==“SingleSelect”）
{
var controlId=“selectFilterFor”+control.Name；
$（“”，{id:controlId，name:control.name，类：“ssInput”，键入：“text”}）
.appendTo（“.search panel字段”）；
$（“#”+controlId）.kendoDropDownList({
dataTextField:“名称”，
dataValueField:“值”，
数据源：control.Attributes，
数据绑定：onDataBound，
选项标签：{Name:，Value:}
});
}
});

---

请参见此

您可能在数组中项目的属性方面遇到一些问题。 添加元素的更安全方法是

.appendTo

而不是

innerHTML

串联

根据问题中显示的“修改数据”，下面应该构建三个剑道下拉列表

  response.JSON.forEach (control => 
  { if (control.UIOGLItrol.UiType == "SingleSelect") 
    {
      var controlId = "selectFilterFor" + control.Name;

      $("<input>", {id:controlId, name:control.Name, class:"ssInput", type:"text"})
      .appendTo(".search-panel-fields");

      $("#"+controlId).kendoDropDownList({
        dataTextField: "Name",
        dataValueField: "Value",
        dataSource: control.Attributes,
        dataBound: onDataBound,
        optionLabel: { Name:"", Value:"" }
      });
    }
  });

response.JSON.forEach（控件=>
{if（control.UIOGLItrol.UiType==“SingleSelect”）
{
var controlId=“selectFilterFor”+control.Name；
$（“”，{id:controlId，name:control.name，类：“ssInput”，键入：“text”}）
.appendTo（“.search panel字段”）；
$（“#”+controlId）.kendoDropDownList({
dataTextField:“名称”，
dataValueField:“值”，
数据源：control.Attributes，
数据绑定：onDataBound，
选项标签：{Name:，Value:}
});
}
});

---

看这个

这就是你想要的东西吗@戴维森：是的，乍一看，重要的部分是完全相同的。。。因此，这增加了混乱！您能提供您正在使用的阵列的示例吗binding@DavidShorthose，它很长，只是为了以防万一而混淆了，现在就有了。希望你能看到发生了什么。如果这对你有效，我会为你补充一个更完整的答案，这就是你想要的东西吗@戴维森：是的，乍一看，重要的部分是完全相同的。。。因此，这增加了混乱！您能提供您正在使用的阵列的示例吗binding@DavidShorthose，它很长，只是为了以防万一而混淆了，现在就有了。希望你能看到发生了什么。如果这对你有效，我会为你添加一个更完整的答案。谁会想到Jquery的AppendTo会有如此不同的行为呢。我希望通过一个链接来解释为什么这样更好，或者为什么通过Javascripts append循环不能像预期的那样工作。从“文档”中，.append（）和.appendTo（）方法执行相同的任务。主要区别在于语法，特别是内容和目标的位置。with.append（），方法前面的选择器表达式是插入内容的容器。另一方面，使用.appendTo（），方法前面的内容作为选择器表达式或动态创建的标记，并插入到目标容器中。”对于

innerHTML+=

，您可能已经添加了控件本身的HTML（

+=selectControl.outerHTML

）。谁会想到Jquery的AppendTo会有如此不同的行为呢。我希望通过一个链接来解释为什么这样更好，或者为什么通过Javascripts append循环不能像预期的那样工作。从“文档”中，.append（）和.appendTo（）方法执行相同的任务。主要区别在于语法，特别是内容和目标的位置。with.append（），方法前面的选择器表达式是插入内容的容器。另一方面，使用.appendTo（），方法前面的内容作为选择器表达式或动态创建的标记，并插入到目标容器中。”对于

innerHTML+=

，您可能已经添加了控件本身的HTML（

+=selectControl.outerHTML

）