动态填充SELECT下拉列表无目标成员时添加成员及分配任务的实现咨询

该需求完全可以实现，你可以按照以下步骤调整代码即可： #

具体调整方案 #

1. 首先优化populateMember方法的参数配置，修正原代码中AJAX返回值类型配置错误的问题
2. 将Amend按钮的事件绑定逻辑移入populateMember的回调中，避免动态生成DOM时事件绑定失效
3. 可选补充：给动态生成的SELECT列表增加「其他成员」选项，选中后自动唤起自定义输入框，无需手动点击Amend按钮
4. 提交表单时额外判断自定义输入框的内容，同步到后端处理即可

调整后的完整代码示例 #

function populateMember() {
    $.ajax({
        type: 'GET',
        url: 'php/getMember.php?mode=edited&rowId=' + $.urlParam('id'),
        // 原代码配置dataType为html但实际返回JSON，修正后无需手动parse返回值
        dataType: 'json',
        encode: true
    })
    .done(function (returnedData) {
        var newRows = (returnedData.length - 3);
        if (returnedData.length > 3){
            for (let x=0; x < newRows; x++){
                $( "#newMember" ).trigger( "click" );
            }
        }
        for (let i in returnedData){
            $('#member' + i).val(returnedData[i][0]);
            $('#task_time_alocatted' + i).val(returnedData[i][1]);
            // 给每个动态生成的下拉框末尾加「自定义成员」选项，不需要可以删除这段
            if (!$('#member' + i).find('option[value="custom"]').length) {
                $('#member' + i).append('<option value="custom">其他（新增成员）</option>');
            }
        }

        // 下拉框选中自定义成员时自动唤起输入框，不需要可以删除这段
        $('[id^="member"]').off('change').on('change', function() {
            if ($(this).val() === 'custom') {
                $('.dvstaff').show();
                $('#btnstaff').val("Cancel");
            } else {
                $('.dvstaff').hide();
                $('#amendmember, #amendtime').val('');
                $('#btnstaff').val("Amend");
            }
        });

        // 原有Amend按钮逻辑移入此处，保证动态生成DOM也能绑定成功
        $("#btnstaff").off('click').on('click', function () {
            if ($(this).val().toLowerCase() == "amend") {
                $('.dvstaff').show();
                $(this).val("Cancel");
            } else {
                $('.dvstaff').hide();
                $('#amendmember, #amendtime').val('');
                $(this).val("Amend");
            }
        });
    })
    .error(function () {});
}

后端适配说明 #

你只需要在表单提交的逻辑中，额外判断amendmember是否有有效值：

• 如果存在有效新成员名称，先将该成员写入你的成员字典表，后续SELECT列表就能直接选到该成员
• 再将amendmember和amendtime的值写入TaskAllocations表即可完成存储

如果你是多行动态生成的表单结构，只需要把.dvstaff的选择器修改为对应行内的局部选择器，避免同时显示所有行的输入框即可。

内容的提问来源于stack exchange，提问作者Kenny