Question

我有表格：

<div class="fieldWrapper">
<label for="id_rooms">Rooms:</label>
<input id="id_rooms" type="number" name="rooms" min="1">
</div>

<div class="extrafieldWrapper">    
</div>

取决于我想要添加或删除新字段的房间数量＆＃34;成人＆＃34;和＃34;孩子＆＃34;。例如：if field＆＃34; room＆＃34;将是2，它应该产生两对夫妇另一个领域为每个房间＆＃39;成人＆＃39;和＆＃39;孩子＆＃39;，但如果从2开始更改值，则应删除一对字段。当改变“房间”的价值时字段从2到3，它应该添加几个字段。我在java脚本上看到了很多关于如何执行此操作的示例，因此我尝试自己编写脚本，但它无法正常工作。取决于现场的价值＆＃39;房间＆＃39;它只添加新的几个字段。

$(function() {

var newFields = $('');
$('#id_rooms').bind('blur keyup change', function() {
    var n = this.value || 0;
    if (n + 1) {
        if (n > newFields.length) {
            addFields(n);
        } else {
            removeFields(n);
        }
    }
});

function addFields(n) {
    for (form_num = newFields.length; form_num < n; form_num++) { 
        $("input[id='id_form-TOTAL_FORMS']").attr('value', form_num + 1);
        $(".extrafieldWrapper").append("<br/><label for='id_form-" + form_num + "-adult'>Adult:</label> <input id='id_form-" + form_num + "-adult' type='number' name='form-" + form_num + "-adult'/> <label for='id_form-" + form_num + "-children'>Children:</label> <input id='id_form-" + form_num + "-children' type='number'  name='form-" + form_num + "-children'/> ");
    }
}

function removeFields(n) {
    $('.extrafieldWrapper').html('');
}

});

我是java-script的新手，你能告诉我我做错了什么吗？非常感谢。

Answer 1

有点不清楚你想要什么样的行为。在这里，我尝试用代码表示它：

$(function () {
  $('#id_rooms').bind('blur keyup change', function () {
    var n = $('#id_rooms').val() || 0;
    $("input#id_form-TOTAL_FORMS]").attr('value', n);
    $(".extrafieldWrapper").empty();
    for (var i = 0; i < n; i++) {
      $(".extrafieldWrapper").append("<br/><label for='id_form-" + i + "-adult'>Adult:</label> <input id='id_form-" + i + "-adult' type='number' name='form-" + i + "-adult'/> <label for='id_form-" + i + "-children'>Children:</label> <input id='id_form-" + i + "-children' type='number'  name='form-" + i + "-children'/>");
    }
  });
});

无论如何，您不需要两个添加和删除字段的功能。您只需要在一个周期内重写div的全部内容。或者，如果您更喜欢两种函数方法，那么您需要收集描述在一个div或span下添加/删除的一对字段的所有标记，并为每个这样的组提供一个唯一的ID，用于解决它。

如何根据另一个字段的值添加或删除字段

1 个答案: