如何从这种动态形式捕获数据

Question

我使用这个 bootsnipp为BootStrap.JS创建动态领域。

如何从这些动态字段捕获数据作为键值对？

如果我在同一页面上有2个部分需要这些动态字段集怎么办？

任何样本片段都将有所帮助。

Answer 1

您需要找到所选的li并获取其文本。 我建议为每个li添加价值，但最终取决于您。我为您的ul添加了id并检查了它的作用。 我选择的ID是“ tryME”。无论如何，这里是您需要的代码：

$('#tryMe a').on('click', function(e) {
  e.preventDefault();

  // This removes the class on selected li's
  $("#tryMe li").removeClass("select");

  // adds 'select' class to the parent li of the clicked element
  // 'this' here refers to the clicked a element
  $(this).closest('li').addClass('select');

  // sets the input field's value to the data value of the clicked a element
  $('#tryMe').val($(this).text());
  console.log( $('#tryMe').val());
});

这是您在bootply上更新的代码： http : //www.bootply.com/e3qqmab4SQ

Answer 2

我注意到此代码片段的一个致命缺陷是，无法区分一个字段的多个实例。 如果输入2个电话号码，哪个是哪个？ 我猜数据可以在服务器端进行分类，但是我只是前端，而后端的魔幻领域就不多了。

我添加了一个按钮#data ，一个隐藏的输入.cache和一个函数collectData(ele) 。 HTML和jQuery带有每个重要组件的功能和用途的详细信息。

 //
/* collectData Function~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~/ 
This function given a group of elements (in classic selector format) will assign each 
element the values of the closest fields as a unique name and the user entered value 
(if any.)
Use the console to see it gather data.
*/
        var collectData = function(ele) {
            var $tgt = $(ele);
            $tgt.each(function(index) {
// $tgt == $(this)
                var $fieldNames = $(this).next('.input-group-select-val').val();
                var $fieldValues=$(this).closest('.form-group').find('.form-control').val();

// Including index to each $fieldName in order to make each key/value pair unique.

                $(this).attr('name', $fieldNames+index);
                console.log('name: '+$(this).attr('name'));
                $(this).val($fieldValues);
                console.log('value: '+$(this).val());
              });
        }

演示： http : //bootsnipp.com/user/snippets/xaAXG