Javascript - 生成控件并附加答案

【问题标题】：Javascript - generate control and appendJavascript - 生成控件并附加
【发布时间】：2017-02-23 12:21:28
【问题描述】：

我正在尝试在 java 脚本中生成控件并将其附加到 div。它非常适合文本框和复选框。但它在生成下拉列表时不起作用。

<script type="text/javascript">
    var tag =
        '<div class="field"><div class="row"><div class="col-sm-6"><label class="control-label" style="font-size:16px;font-weight:500;">@Html.DisplayFor(m => m.CategoryMasterNewModel[i].GroupName)</label></div>' +
        '<div>@Html.HiddenFor(m => m.CategoryMasterNewModel[i].ID) @Html.DropDownListFor(m => m.CategoryMasterNewModel[i].Result, (ViewData["ddlist_390"] as List<SelectListItem>), new { @id = Model.CategoryMasterNewModel[i].ID })</div></div></div>'

    var divId = "#innerDiv_" + @Model.CategoryMasterNewModel[i].ParentID;

    jQuery(divId).append(tag);
</script>

现在，当这段代码被执行时，它会在评估该标签时产生问题。

当我登录控制台时，

标签生成如下 -

var tag = '<div class="field"><div class="row"><div class="col-sm-6"><label class="control-label" style="font-size:16px;font-weight:500;"><input id="CategoryMasterNewModel_15__GroupName" name="CategoryMasterNewModel[15].GroupName" type="hidden" value="Manual Override" />Manual Override</label></div>' +
    '<div><input data-val="true" data-val-number="The field ID must be a number." data-val-required="The ID field is required." id="CategoryMasterNewModel_15__ID" name="CategoryMasterNewModel[15].ID" type="hidden" value="390" /><input data-val="true" data-val-number="The field ParentID must be a number." id="CategoryMasterNewModel_15__ParentID" name="CategoryMasterNewModel[15].ParentID" type="hidden" value="207" /><input id="CategoryMasterNewModel_15__Type" name="CategoryMasterNewModel[15].Type" type="hidden" value="Select" /><select id="390" name="CategoryMasterNewModel[15].Result"><option value="yes">yes</option> 
<option value ="no" > no < /option> 
<option value = "others" > others < /option> 
</select></div > < /div></div > '

现在由于最后三行没有进入该标签，因此它没有成功评估该标签。

有没有什么办法可以把所有这些都放在标签上？

【问题讨论】：

标签： javascript jquery html model-view-controller

【解决方案1】：

您可以通过创建自己的脚本模板来尝试这样的方式：

<script type="text/template" id="tagTemplate">
     <div class="field">
         <div class="row">
           <div class="col-sm-6">
               <label class="control-label" style="font-size:16px;font-weight:500;">
                 @Html.DisplayFor(m => m.CategoryMasterNewModel[i].GroupName)
               </label>
           </div>
         <div>
           @Html.HiddenFor(m => m.CategoryMasterNewModel[i].ID)
           @Html.DropDownListFor(m => m.CategoryMasterNewModel[i].Result, (ViewData["ddlist_390"] as List<SelectListItem>), new { @id = Model.CategoryMasterNewModel[i].ID })
        </div>
     </div>
   </div>
</script>


<script type="text/javascript">       
   var divId="#innerDiv_"+ @Model.CategoryMasterNewModel[i].ParentID;
   jQuery(divId).append($("#tagTemplate").html());
</script>

【讨论】：