Javascript - 生成控件和追加

时间:2017-02-23 12:21:28

标签: javascript jquery html model-view-controller

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

现在因为最后三行没有进入该标记,因此它没有成功评估此标记。

我们有什么方法可以将所有这些都带到标签上吗?

1 个答案:

答案 0 :(得分: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>