如何查找已动态创建且存在于另一个元素中的选择下拉列表的值和 ID

Posted 2023-05-09

【中文标题】如何查找已动态创建且存在于另一个元素中的选择下拉列表的值和 ID

【英文标题】：How to find the value and id of select drop-down which has been created dynamically and which is present within the another element

【发布时间】：2020-11-08 16:26:29

【问题描述】：

我尝试使用 jquery 动态创建一个矩形，并在创建矩形后向其附加 select drop-down，这两者都是动态完成的，id 是动态分配给它们的。在我提交数据时创建所有必需的矩形之后，我想读取每个矩形以及每个矩形的 select 值。我能够获得矩形的id，但我无法获得每个选择下拉列表的selected 值和id。我尝试了一些东西，但都没有奏效，因此在这里发布了相同的内容：

function to create the replica of the rectangle and append select drop-down:

$('#DroppableCanvas').on('drop',function(event)
    event.preventDefault();
    var data    =   event.originalEvent.dataTransfer.getData("text/html");
    var nodeCopy = document.getElementById(data).cloneNode(true);
    nodeCopy.setAttribute("id", 'box'+NewBoxId);
    nodeCopy.classList.add('draggableAddedFields');
    nodeCopy.setAttribute("draggable",true);
    
    var SelectID        =   'select'+NewBoxId;
    var combo = $("<select></select>").attr("id", SelectID).attr("name", SelectID);
    
    $.each(BusinessStep, function (i, el) 
        combo.append("<option>" + el.text + "</option>");
    );
    
    $(nodeCopy).append(combo);
    
    event.target.appendChild(nodeCopy);
    NewBoxId++;
);

function to read each rectangle and all the added elements within each rectangle:

//After adding all the drag and drop fields with values submit them
$('#SubmitFields').on('click',function()
    var AllFields       =   [];
    $(".draggableAddedFields").each(function() 
        var obj     =   new Object();
        obj.ID      =   this.id;
        console.log($(this.id).find("select"));
        AllFields.push(obj);
    );
) 

当我尝试执行以下操作时，我得到了 jQuery 函数： console.log($(this.id).find("select"));

当我尝试这样做时，我变得不确定： console.log($(this.id).find("select").attr('id'));

我想在这里找到每个元素，例如 select 元素 id 并选择 value 作为选择下拉菜单。

由于$(this.id) 属于外部矩形，我无法使用它获得价值。在大多数回复中，我搜索了他们有直截了当的要求，但就我而言，因此发布似乎有点不同。

【参考方案1】：

要查找当前元素中的任何元素，请使用$(this).find 而不是$(this.id).find

要获取draggableAddedFields 中选择下拉菜单的 id 和值，请使用此

$(".draggableAddedFields").each(function() 
       var selectId =    $(this).find("select").attr('id')
       var selectValue = $(this).find("select").val()

【讨论】：

非常感谢，兄弟。我知道我犯了一个小错误。花了一个多小时后，我的大脑完全停止了工作，因此我想到了发布它。我应该尝试使用整个元素而不只是绕过 id $(this.id).find("select")。