Question

强制div id动态显示不同数量的输入字段。从第一个开始的每个输入字段获得一个id attr1，然后是attr2，.. attr [n]。我需要一种方法将其转换为一个数组，该数组使用keyup获取每个输入字段的值，并将它们放入具有id详细信息的单独输入字段中。此代码有效，但在某些情况下，当硬编码输入字段ID超过生成的输入字段ID时，返回undefined。感谢。

   <div id="attributes"> <!--Start of Div Refreshed on Ajax Page Refresh-->
          <div id="mandatory">

          </div>
   </div>



     var total = '#attr1, #attr2';

     $("#attributes").on('keyup', total, function(){                    
                    update();
            })  

            function update() {
                $("#detail").val($('#attr1').val() + "," $('#attr2').val());
              }

Answer 1

我不确定这是否是您正在寻找的，但我认为它会带您走正确的道路。在此示例中，无论何时生成文本输入字段，都会附加一个输入事件处理程序，以更改主文本区域的值。如果这不是你想要的，请告诉我，我会很乐意尝试更多。

＆＃13;

document.getElementById('adder').onclick = function() {
  var dynamicTextbox = document.createElement('input');
  dynamicTextbox.setAttribute('type', 'text');
  dynamicTextbox.setAttribute('class', 'dynamicText');
  dynamicTextbox.addEventListener("input", function() {
    var allTextboxes = document.getElementsByClassName('dynamicText');
    var allValues = '';
    for (var i=0; i < allTextboxes.length; i++) {
      allValues += allTextboxes[i].value;
    }
    document.getElementById('detail').value = allValues;

  });
  document.getElementById('textboxes').appendChild(dynamicTextbox);
}

＆＃13;

<textarea id="detail"></textarea>
<input id="adder" type="button" value="Add Text Field" />
<div id="textboxes"></div>

＆＃13;

Answer 2

如果我理解你的问题，我认为你正在寻找类似的东西：

var fields = $("#mandatory").find("input"),
    ids = [];

fields.each(function(){
		$(this).on("keyup", function(){
    	var val = "";
      ids = [];
      fields.each(function(){
        val += $(this).val() + (fields.length === ($(this).index() + 1) ? "": ", ");    
        
        ids.push($(this).get(0).id);
      });
      $("#detail").val(val);
      console.log(ids)
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="attributes">
<div id="mandatory">
<input id="one" class="one" value="54"/>
<input id="two" class="two" value="55"/>
<input id="three" class="three" value="587"/>
</div>
</div>
<input id="detail" type="text" />

迭代动态生成的输入字段id并使用keyup在单独的输入字段中获取它们的值

2 个答案: