[英]How to append a C# formatted html
I have a button that append's the same layout of html but I have a problem taking the select values with it. 我有一个按钮,追加了html的相同布局,但是在选择值时遇到了问题。 My html is:
我的html是:
<div id="degreePlusSign">Button</div>
<div class="padding">
<div class="col-md-5 col-xs-12">
<label for="prefix" class="sr-only">Degrees</label>
<select class="form-control marginBottom15">
@{
foreach (var degree in ViewBag.NewDegrees)
{
<option value="@degree.DegreeID" selected>@degree.DegreeName</option>
}
}
</select>
<span class="glyphicon form-control-feedback"></span>
</div>
</div>
JS: JS:
$('#degreePlusSign').on('click', function () {
$(this).closest('.padding').append('<div class="padding mBottom"><i class="fa fa-times-circle fa-2x" aria-hidden="true"></i><div class="col-md-5 col-xs-12"><select class="form-control marginBottom15">@{foreach (var degree in ViewBag.NewDegrees){<option value="@degree.DegreeID" selected>@degree.DegreeName</option>}}</select><span class="glyphicon form-control-feedback"></span></div><div class="col-md-7 col-xs-12"><input class="form-control" placeholder="Major/Area of Study" type="text" /></div></div>');
});
Basically it recreates the html, but my problem is I'm using a foreach loop to bring in the values from the backend and it will only work with the inital container, not the duplicated containers afterwards. 基本上,它会重新创建html,但是我的问题是我正在使用foreach循环从后端引入值,它仅适用于inital容器,而不适用于随后的重复容器。 How do I keep the values on every duplication with the append jquery?
如何使用附加jquery保留每次重复的值?
You have got two options: 您有两种选择:
{ var opts=new StringBuilder(); var sel="selected"; foreach(var d in ViewBag.NewDegrees) { opts.Append($"{d.DegreeName}"); sel=""; } }
Then somewhere down store it into a js variable: 然后将其存储到js变量中:
var optsList="@(opts)";
Now you can use append new HTML as: 现在,您可以使用追加新的HTML作为:
$('#degreePlusSign').on('click', function () {
$(this).closest('.padding').append('<div class="padding mBottom"><i class="fa fa-times-circle fa-2x" aria-hidden="true"></i><div class="col-md-5 col-xs-12"><select class="form-control marginBottom15">'+
optsList/*THIS IS THE VALUE WE STORED FROM C# CODE*/
+'</select><span class="glyphicon form-control-feedback"></span></div><div class="col-md-7 col-xs-12"><input class="form-control" placeholder="Major/Area of Study" type="text" /></div></div>');
});
select
element and use that: select
元素并使用它: $('#degreePlusSign').on('click', function () { /*CLONE EXISTING SELECT ELEMENT. YOU MAY WANT TO PUT AN ID FOR SELECTION*/ var cl=$("select.form-control.marginBottom15").clone(); var d = $("").addClass("padding mBottom") append("").addClass("fa fa-times-circle fa-2x").attr("aria-hidden",'true'); /*APPEND CLONED SELECT TO INNER DIV*/ d.append("").addClass("col-md-5 col-xs-12").append(cl); d.append(cl); d.append("").addClass(glyphicon form-control-feedback"); d.append("").addClass("col-md-7 col-xs-12").append("").addClass("form-control") .attr("placeholder","Major/Area of Study").attr("type","text"); $(this).closest(".padding").append(d); });`
Hope you will be able fix any jQuery mess. 希望您能够修复任何jQuery混乱。 I haven't used it since long.
我已经很久没有使用它了。
.clone was what I was looking for. .clone是我想要的。 $('.padding').clone().append('.padding');
$('。padding')。clone()。append('。padding');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.