Question

所以我想要做的就是在点击时添加具有动态组件的项目。我的问题是，我所说的项目是PHP代码。我的代码，如下所示，不起作用，我不知道如何解决它。如果我只有一个要附加的html元素，它会起作用，但是这个没有。我对jQuery不太满意，因此需要帮助。

这是我的代码：

<div id="main" style="text-align: center;">
    <input type="button" id="btAdd" value="Add Element" class="bt" />
    <input type="button" id="btRemove" value="Remove Element" class="bt" />
    <input type="button" id="btRemoveAll" value="Remove All" class="bt" /><br />
</div>

这是我的jQuery：

var iCnt = 0;

    var container = $('.equip-ops');

    $('#btAdd').click(function() {
        if (iCnt <= 19) {

            iCnt = iCnt + 1;

            // ADD ITEM.
            $(container).append('<label>Selecteaza Operatiune<select name="eq_1_op_' + iCnt + '"><?php foreach ($operations_' + iCnt + '->fetchAll() as $operation) : ?><option value="<?php echo $operation['oname']; ?>"><?php echo $operation['oname']; ?></option><?php endforeach; ?></select></label>
            ');

            // SHOW SUBMIT BUTTON IF ATLEAST "1" ELEMENT HAS BEEN CREATED.
            if (iCnt == 1) {

                var divSubmit = $(document.createElement('div'));
                $(divSubmit).append('<input type=button class="bt" onclick="GetTextValue()"' + 'id=btSubmit value=Submit />');

            }

            // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
            $('#main').after(container, divSubmit);
        }
        // AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON.
        // (20 IS THE LIMIT WE HAVE SET)
        else {      

            $(container).append('<label>Reached the limit</label>'); 
            $('#btAdd').attr('class', 'bt-disable'); 
            $('#btAdd').attr('disabled', 'disabled');

        }
    });

    $('#btRemove').click(function() {   // REMOVE ELEMENTS ONE PER CLICK.
        if (iCnt != 0) { $('#tb' + iCnt).remove(); iCnt = iCnt - 1; }

        if (iCnt == 0) { $(container).empty(); 

            $(container).remove(); 
            $('#btSubmit').remove(); 
            $('#btAdd').removeAttr('disabled'); 
            $('#btAdd').attr('class', 'bt') 

        }
    });

    $('#btRemoveAll').click(function() {    // REMOVE ALL THE ELEMENTS IN THE CONTAINER.

        $(container).empty(); 
        $(container).remove(); 
        $('#btSubmit').remove(); iCnt = 0; 
        $('#btAdd').removeAttr('disabled'); 
        $('#btAdd').attr('class', 'bt');

    });
});

Answer 1

好的，这段代码有一些关键问题，这是完全错误的。

如果此代码位于PHP文件中的<script></script>内，然后它可能会工作，将PHP和JS混合在一起。如果它在里面一个 .js 文件，它永远不会工作。 JS是一种前端语言 PHP是后端语言。
阅读并了解 AJAX ：$.ajax()和$.getJSON()。这就是让PHP和JS协同工作的方法。
如果您生成模板，那么使用PHP推广您的<select>可能没问题，但对于JS则不能使用。将select-options数据作为数组注入，让JS将其解析为HTML，然后.append()。
所有那些在底部删除和清空都是矫枉过正的。如果您希望从#main移除所有内容，则只需：$('#main').empty();

我现在要离开它。

以下是一些资源，从哪里开始：
jQuery.ajax()
Programmatically create select list
jQuery.getJSON()
Getting jquery and php work together with forms? (this has forms, ajax, php)

如何使用jQuery添加动态递增项？

1 个答案: