Я пытаюсь создать прямоугольник динамически с помощью 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"));

Я получаю undefined, когда пытаюсь сделать: console.log($(this.id).find("select").attr('id'));

Я хотел бы найти здесь каждый элемент, например, в этом случае select element id и выбрать value в раскрывающемся списке.

Поскольку $(this.id) принадлежит внешнему прямоугольнику, я не могу получить значение, используя это. В большинстве ответов я искал, что у них прямое требование, но в моем случае это немного отличается от публикации.

0
BATMAN_2008 19 Июл 2020 в 11:49

1 ответ

Лучший ответ

Чтобы найти любой элемент внутри текущего, используйте $(this).find вместо $(this.id).find

Чтобы получить идентификатор и значение раскрывающегося списка выбора внутри draggableAddedFields, используйте это

$(".draggableAddedFields").each(function() {
       var selectId =    $(this).find("select").attr('id')
       var selectValue = $(this).find("select").val()
1
Prakhar 19 Июл 2020 в 09:44