Javascript - 生成控件并附加

Question

我正在尝试在 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>

现在，当执行此代码时，它会在评估该标记时产生问题。

当我 checkin 控制台时，

标签的生成如下 -

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 > '

现在，由于最后三行没有出现在该标记内，因此它无法成功评估该标记。

有什么方法可以让我们只将所有这些引入到标签中吗？

Answer 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>