Question

我有一个包含2个输入的表单，当用户从description中选择datalist时，第二个输入将填充product。它工作正常 - ＆gt; bootbly1

现在我想在表单中添加动态输入。输入插入正常，但上述功能不适用于新输入..

这是最终的bootbly

<div class="container">
  <div class="row">
            <div class="col-lg-12 col-xs-12">
            <form id="bookForm" action="#" method="post" class="form-horizontal">
            <div class="form-group">
                <div class="col-xs-4">
                    <input class="form-control" name="description-0" id="ajax" list="json-datalist" placeholder="Description" type="text">
                    <datalist id="json-datalist"></datalist>

                </div>
                <div class="col-xs-2" style="width: 160px;">
                    <input class="form-control" name="product-0" placeholder="product" type="text">
                </div>

                 <div class="col-xs-1">
                    <button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button>
                </div>
            </div>   

            <!-- The template for adding new field -->
            <div class="form-group hide" id="bookTemplate">
                 <div class="col-xs-4">
                    <input class="form-control" name="description" id="ajax" list="json-datalist" placeholder="description" type="text">
                    <datalist id="json-datalist"></datalist>

                </div>
                <div class="col-xs-2" style="width: 160px;">
                    <input class="form-control" name="product" placeholder="product" type="text">
                </div>


                <div class="col-xs-1">
                    <button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button>
                </div>
            </div>

            <div class="form-group">
                <div class="col-xs-5 col-xs-offset-1">
                    <button type="submit" class="btn btn-default">Submit</button>
                </div>
            </div>
        </form>


            </div>
        </div>
  </div>

和javascript

var counter = 0;    
var dataList = document.getElementById('json-datalist');

    var jsonOptions = [{
                        "product": "11111",
                        "description": "description 1"
                      }, {
                        "product": "22222",
                        "description": "description 2"
                      }, {
                        "product": "33333",
                        "description": "description 3"
                      }, {
                        "product": "44444",
                        "description": "description 4"
                      }, {
                        "product": "55555",
                        "description": "description 5"
                      }]; 

    jsonOptions.forEach(function(item) {

      var option = document.createElement('option');

      option.value = item.description;
      option.text = item.description;
      option.setAttribute('data-product', item.product);
      dataList.appendChild(option);
    });

$(function() {
    $('#ajax').change(function() {
        var description = $(this).val();
        var product = $('#json-datalist > option[value="' + description + '"]').data('product');
        $('input[name=product-'+ counter + ']').val(product);

    });
});


$('#bookForm')
    // Add button click handler
    .on('click', '.addButton', function() {
        counter++;
        var $template = $('#bookTemplate'),
            $clone    = $template
                            .clone()
                            .removeClass('hide')
                            .removeAttr('id')
                            .attr('data-book-index', counter)
                            .insertBefore($template);

        // Update the name attributes
        $clone
            .find('[name="description"]').attr('name', 'description-' + counter).end()
            .find('[name="product"]').attr('name', 'product-' + counter).end();
    })

    // Remove button click handler
    .on('click', '.removeButton', function() {
        var $row  = $(this).parents('.form-group'),
            index = $row.attr('data-book-index');

        // Remove element containing the fields
        $row.remove();
    });

还有一件事是，如果用户按下加号按钮一些时间来创建输入然后尝试填充第一个输入，那么最后一个输入将被填充..

Answer 1

基本上，您的动态描述选择器（“#ajax”）和计数器（取最后修改的计数器）更新产品是错误的。

解决方案：http://www.bootply.com/ZckX8mlKOQ

动态添加多个输入

1 个答案: