从动态生成的输入字段中获取下拉列表中的数据，而无需保存值 - jquery

Getting data inside drop down from dynamically generated input fields without values being saved - jquery

本文关键字：jquery 保存 下拉列表 动态 输入 字段 获取 数据      更新时间：2023-09-26

我通过用户输入动态生成输入字段。我的表单未保存。我必须从所有输入字段中获取值并将它们填充到下拉选择框。

另外，还有其他方法可以做到吗？这是正确的方法吗？

这样做是解决问题的最无效的方法。 

$("input.className").each(function (index,element)
{
    var inputVal = $("element").val();
    $("select").append('<option>'+inputVal+'</option');
});

首先，您点击 dom 以查找输入。

然后，您将使用jquery遍历每次循环时返回的输入。

在"每个"通过循环时，您再次点击 dom。

请参阅我发布的第一个答案。 虽然你的方法"有效"，如果你不得不在大方面写一些东西，这种方法将不再有效。

当你问"

如何"时，一定要问"最有效的方法是什么？ 否则你会积累很多坏习惯，这将使你无法写出任何大的东西。

您可以将具有相同类的输入元素的值添加到选择元素中，如下所示：

$("input.className").each(function (index,element)
{
    var inputVal = $("element").val();
    $("select").append('<option>'+inputVal+'</option');
});

如果您的页面不是动态生成的，您应该首先获取所有输入。 如果它是动态生成的，您的 dom 节点应该已经存储在对象中。

假设您在页面上有多个输入部分（不是动态生成的），每个输入部分都用一个 id 表示：

<div class="formSection" id="dropDownEntry">
    <label for="dropDown1">Drop1</label>
    <input id="dropDown1"></input>
    <label for="dropDown2">Drop1</label>
    <input id="dropDown2"></input>
</div>

现在，当您去抓取字段时，如果可能的话，您应该只执行一个 dom 查找。 所以你抓取父节点，然后指示jquery，或者js获取带有"input"标签的子节点。 

var dropDownInputsArray = $('#dropDownEntry').find('input');

好的，现在你有一个输入数组，并且你已经把它存储在全局范围之外的函数中。 不要使用 $.EACH。 这是一个坏习惯，因为它慢得要命。 我真的从不使用它。 曾经，而且不难避免。 遍历您的 dom 节点数组，并确保在 init 上缓存长度，如下所示：

for(i=0, len=dropDownInputsArray.length; i < len; i++){
}

但是 WAIT，您首先需要创建一个非全局范围的节点来存储您的选择节点，这样您就不会以迭代方式将内容附加到 dom。 游戏的名称是DON'T TOUCH THE G-D DOM。 

var mySelectNode = $('<select/>');
//len caches the length so you don't have to look it up each time.  Performance ++
 for(i=0, len=dropDownInputsArray.length; i < len; i++){
      var inputNodeVal = dropDownInputsArray[i].value;
      if(inputNodeVal.length > 0) //was anything entered there?
        mySelectNode.append($('<option/>', {
                   value: inputNodeVal,
                   text: inputNodeval
               }));
 }
//now append your mySelectNode to the dom or replace the previous select node with it.  We did it this way because before you actually attach a node to the dom you have stayed in javascript land which is 'cheaper' than touching dom-land.
相关文章：