如何附加C＃格式的html

Question

我有一個按鈕，追加了html的相同布局，但是在選擇值時遇到了問題。 我的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：

$('#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>');
});

基本上，它會重新創建html，但是我的問題是我正在使用foreach循環從后端引入值，它僅適用於inital容器，而不適用於隨后的重復容器。 如何使用附加jquery保留每次重復的值？

Answer 1

您有兩種選擇：

1. 從C＃吐出選項值（格式化）並保存在JS變量中：

{
       var opts=new StringBuilder();
       var sel="selected";
       foreach(var d in ViewBag.NewDegrees)
       {
           opts.Append($"{d.DegreeName}");
           sel="";
       }
    }

然后將其存儲到js變量中：

var optsList="@(opts)";

現在，您可以使用追加新的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>');
});

2. 克隆生成的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);    
});`

希望您能夠修復任何jQuery混亂。 我已經很久沒有使用它了。

Answer 2

.clone是我想要的。 $（'。padding'）。clone（）。append（'。padding'）;