的jQuery

Question

我正在尝试使用JavaScript在我的表单区域中添加一组输入字段。我的代码工作正常。

   $(document).ready(function() {
        var max_fields      = 10;
        var wrapper         = $(".input_fields_wrap");
        var add_button      = $("#add_field_button");

        var x = 1;
        $(add_button).click(function(e){
            e.preventDefault();
            if(x < max_fields){
                x++;
                $(wrapper).append('<div><div class="form-group"><label>City</label><select class="form-control" id="bcity" name="bcity[]">' +
                '<option value=" ">Select</option>' + '</select></div><a href="#" class="remove_field">Remove</a></div>'); //add input box
            }
        });

        $(wrapper).on("click",".remove_field", function(e){ //user click on remove text

            e.preventDefault(); $(this).parent('div').remove(); x--;
        })
    });

但我想用id="bcity"添加x的值。我正在尝试，但给出错误。

Answer 1

的jQuery

在这里，您必须将字符串连接成不同的部分，以便在循环中动态地工作。

 $(document).ready(function() {
     var max_fields = 10;
     var wrapper = $(".input_fields_wrap");
     var add_button = $("#add_field_button");

     var x = 1;
     $(add_button).click(function(e) {
         e.preventDefault();
         if (x < max_fields) {
             x++;
             $(wrapper).append('<div><div class="form-group"><label>City</label><select class="form-control" id="bcity' + x +  '" name="bcity[]">' +
                 '<option value=" ">Select</option>' + '</select></div><a href="#" class="remove_field">Remove</a></div>'); //add input box
         }
     });

     $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text

         e.preventDefault();
         $(this).parent('div').remove();
         x--;
     })
 });

Answer 2

请注意，您在删除时正在执行x--，因此您可以拥有重复的名称，因此我建议您使用几个变量：

var x = 1;
var fields = 1;

x完全用作@Harben建议，fields控制总字段数：

if (fields < max_fields) {
    x++;
    fields ++;

    $(wrapper).append('<div><div class="form-group"><label>City</label><select class="form-control" id="bcity' + x +  '" name="bcity[]">' +
        '<option value=" ">Select</option>' + '</select></div><a href="#" class="remove_field">Remove</a></div>'); //add input box
}

但是，在删除之后：

$(wrapper).on("click", ".remove_field", function(e) { 
    //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    fields--;
});

通过这种方式，您将避免重叠名称，并且您可以在必要时使用简单的JQuery函数引用所有已创建的字段。

如何使用div id javascript添加增量值

2 个答案:

的jQuery