Question

我正在尝试在按钮点击上添加新行：

<div class="row" style="margin: 20px 0;">
     <div id="AddContainer">
          <!--new rows with content to add will be added here-->
     </div>
     <br />
     <input id="btnAdd" type="button" class="btn btn-success" value="+" />
</div>

和JavaScript：

$("#btnAdd").bind("click", function () {
var div = $("<div />");
div.html(GetDynamicTextBox(''));
$("#AddContainer").append(div);
});

$("#btnGet").bind("click", function () {
    var values = "";
    $("input[name=DynamicTextBox]").each(function () {
        values += $(this).val() + "\n";
    });
    alert(values);
});

$("body").on("click", ".remove", function () {
    $(this).closest("div").remove();
    var ddlId = $('[id*=hfDDLId]').val();
    $('[id$=ddl' + parseInt(ddlId) + ']').remove();
    $('[id*=hfDDLId]').val(parseInt($('[id*=hfDDLId]').val()) - 1);
    var previousDropDownId = $('[id*=hfDropDownIds]').val();
    $('[id*=hfdropdownids]').val(resultids);
    //}
});

function GetDynamicTextBox(value) {
    var combo = $("<select></select>").attr("id", value).attr("name", value).attr("runat", "server").attr("class", "class").attr("required", "required");
    $.each(document.pvm.SettingsList(), function (i, el) {
        combo.append("<option value=" + el + ">" + el + "</option>");
    });
    return '<input type="button" value="-" class="remove btn btn-danger" />&nbsp'
    + combo + '&nbsp'
    + '<input name = "DynamicTextBox" type="text" value="' + value + '" required/>&nbsp'
}

function ClearAddTab() {
    document.getElementById("AddContainer").innerHTML = "";
}

，设置列表为：

_mVM.SettingsList = ko.observableArray(['France', 'Germany', 'Spain']);

问题是我需要为每个新添加的行添加带有SettingsList选项的下拉列表，但它显示[object object]。可以在红色按钮和文本字段之间添加下拉列表，还允许用户通过按红色按钮删除该行？

Answer 1

首先在<div>内添加<div id="AddContainer">，这将用于附加新输入。

<div id="AddContainer">
          <!--new rows with content to add will be added here-->
          <div></div>
     </div>

在按钮上添加onclick事件然后调用此函数，它会附加一个新按钮：

<script>
   function addButton()
   {
      $('#AddContainer')
      .find('div')
      .remove()
      .end()
      .append('<input type="button" value="button"
      /><div></div>');
   }
</script>

您的输入按钮：

<input id="btnAdd" type="button" onclick="addButton();" class="btn btn-success" value="+" />

Answer 2

在这种情况下，您需要所选DOM对象的HTML而不是对象本身。

当运行函数GetDynamicTextBox时，在返回字符串时尝试combo.prop（'outerHTML'），你应该得到下拉html而不是[object object]。

JsFiddle：jsfiddle.net/fgazfLaz

HTML

<div class="row" style="margin: 20px 0;">
  <div id="AddContainer">
      <!--new rows with content to add will be added here-->
  </div>
  <br />
  <input id="btnAdd" type="button" class="btn btn-success" value="+" />
</div>

的Javascript

var settingsListAry = ['France', 'Germany', 'Spain'];

$("#btnAdd").bind("click", function () {
    //var test = GetDynamicTextBox('a');
    //alert("test");
    var div = $("<div />");
    div.html(GetDynamicTextBox(''));
    $("#AddContainer").append(div);
});

$("#btnGet").bind("click", function () {
    var values = "";
    $("input[name=DynamicTextBox]").each(function () {
        values += $(this).val() + "\n";
    });
    alert(values);
});

$("body").on("click", ".remove", function () {
    $(this).closest("div").remove();
    var ddlId = $('[id*=hfDDLId]').val();
    $('[id$=ddl' + parseInt(ddlId) + ']').remove();
    $('[id*=hfDDLId]').val(parseInt($('[id*=hfDDLId]').val()) - 1);
    var previousDropDownId = $('[id*=hfDropDownIds]').val();
    $('[id*=hfdropdownids]').val(resultids);
    //}
});

function GetDynamicTextBox(value) {

    var combo = $("<select></select>").attr("id", value).attr("name",     value).attr("runat", "server").attr("class", "class").attr("required", "required");

    $.each(settingsListAry, function (i, el) {
        combo.append("<option value=" + el + ">" + el + "</option>");
    });

    return '<input type="button" value="-" class="remove btn btn-danger" />&nbsp'
    + combo.prop('outerHTML') + '&nbsp'
    + '<input name = "DynamicTextBox" type="text" value="' + value + '" required/>&nbsp'
}

function ClearAddTab() {
    document.getElementById("AddContainer").innerHTML = "";
}

在按钮单击时添加带有下拉列表的新行

2 个答案: