在动态添加的行上更改相关的下拉输入选项

Question

我在OpenCart MVC中工作，我有一个表单，其中有一个允许添加行输入的部分。提交的每一行都成为自己的记录。 [输入下拉状态]需要依赖于[输入下拉类型]。如果[输入下拉类型]是电子邮件，则[输入下拉列表]将显示一组选项，如果[输入下拉类型]显示事件，则[输入下拉状态]将显示一组不同的选项。

我有一个工作Codepen应该如何工作。

我遇到的问题是将其添加到我的代码中。使用JQuery将行添加到表单上。每行都有一个component_row增量，以允许单个记录。我尝试将SELECT名称添加到Script Im中，但到目前为止，我似乎无法使其正常工作（不更改输入选项）。

目前，在表单上，​​输入类型显示其正确的选项（从表中读取）但是输入状态为空并且在输入类型上做出选择根本不影响输入状态（它在代码中）笔HTML代码部分显示通过编辑控制器访问时的现有记录。在添加控制器上，最初没有行，用户可以通过单击加号按钮添加任意数量的行。这些行是通过我列出的第一个脚本VIEW添加的：

<div class="wrapper">
    <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-pencil"></i>
            <?php echo $text_add_component; ?>
        </h3>
    </div>
    <div class="panel-body" id="addon">
        <div class=" col-lg-10 col-lg-push-1 form-group">
            <div class="tab-pane" id="tab-special">
                <div class="table-responsive" id="component-module">
                    <table id="components" class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <td class="text-left">
                                    <?php echo $entry_name; ?>
                                </td>
                                <td class="text-left">
                                    <?php echo $text_filter_type; ?>
                                </td>
                                <td class="text-left">
                                    <?php echo $entry_status; ?>
                                </td>
                                <td class="text-left">
                                    <?php echo $entry_owner; ?>
                                </td>
                                <td class="text-left">
                                    <?php echo $entry_component_start_date; ?>
                                </td>
                                <td></td>
                            </tr>
                        </thead>
                        <tbody>
                            <?php $component_row = 0;?>
                            <?php if (isset($component_modules)) {?>
                            <?php foreach ($component_modules as $component_module) {?>
                            <tr id="component-row<?php echo $component_row; ?>">
                                <td class="text-left"><input type="text" name="component_module[<?php echo $component_row; ?>][component_name]"
                                        value="<?php echo $component_module['component_name']; ?>" class="form-control" />
                                </td>

                                <td class="text-left">
                                    <div class="component-dropdowns"><select name="component_module[<?php echo $component_row; ?>][component_type]"
                                            class="form-control">
                                            <?php foreach ($component_groups as $component_group) {?>
                                            <option value="<?php echo $component_group['group_type']; ?>" <?php echo ($component_module['component_type'] == $component_group['group_type']) ? 'selected' : ''; ?>>
                                                <?php echo $component_group['group_type']; ?>
                                            </option>
                                            <?php }?>
                                        </select>
                                    </div>
                                </td>
                                <td class="text-left">
                                    <div class="component-dropdowns"><select name="component_module[<?php echo $component_row; ?>][component_status]"
                                            class="form-control">
                                            <?php foreach ($component_status as $status) {?>
                                            <option value="<?php echo $status['status_type']; ?>" <?php echo ($component_module['component_status'] == $status['status_type']) ? 'selected' : ''; ?>>
                                                <?php echo $status['status_type']; ?>
                                            </option>
                                            <?php }?>
                                        </select></div>

                                </td>
                                <td class="text-left">
                                    <div class="component-dropdowns"><select name="component_module[<?php echo $component_row; ?>][component_owner]"
                                            class="form-control">
                                            <?php foreach ($users as $user) {?>
                                            <option value="<?php echo $user['username']; ?>" <?php echo ($component_module['component_owner'] == $user['username']) ? 'selected' : ''; ?>>
                                                <?php echo $user['username']; ?>
                                            </option>
                                            <?php }?>
                                        </select></div>

                                </td>
                                <td class="text-left">
                                    <div class="input-group date required"><input type="text" name="component_module[<?php echo $component_row; ?>][component_start_date]"
                                            value="<?php echo $component_module['component_start_date']; ?>"
                                            data-date-format="YYYY-MM-DD" class="form-control" /><span class="input-group-btn"
                                            id="component-calendar-btn"><button class="btn btn-default" type="button"><i
                                                    class="fa fa-calendar"></i></button></span></div>

                                </td>
                                <input type="hidden" name="component_module[<?php echo $component_row; ?>][component_parent_id]"
                                    value="<?php echo $component_module['parent_id']; ?>" class="form-control" />
                                <td class="text-left"><button type="button" onclick="$('#component-row<?php echo $component_row; ?>').remove();"
                                        data-toggle="tooltip" title="<?php echo $button_remove; ?>" class="btn btn-danger"><i
                                            class="fa fa-minus-circle"></i></button></td>
                            </tr>


                            <?php $component_row++;?>
                            <?php }?>
                            <?php } else {?>
                            <tr>
                                <td colspan="5" class="text-center">No components </td>
                            </tr>
                            <?php }?>

                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="5"></td>
                                <td class="text-right"><button type="button" onclick="addComponents();" data-toggle="tooltip"
                                        title="<?php echo $button_add; ?>" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
                            </tr>
                        </tfoot>
                    </table>
                    <?php if ($error_component_name) {?>
                    <div class="text-danger">
                        <?php echo $error_component_name; ?>
                    </div>
                    <?php }?>
                    <?php if ($error_component_type) {?>
                    <div class="text-danger">
                        <?php echo $error_component_type; ?>
                    </div>
                    <?php }?>
                    <?php if ($error_component_status) {?>
                    <div class="text-danger">
                        <?php echo $error_component_status; ?>
                    </div>
                    <?php }?>
                    <?php if ($error_component_owner) {?>
                    <div class="text-danger">
                        <?php echo $error_component_owner; ?>
                    </div>
                    <?php }?>
                    <?php if ($error_date_beginning) {?>
                    <div class="text-danger">
                        <?php echo $error_date_beginning; ?>
                    </div>
                    <?php }?>

                </div>
            </div>
        </div>
    </div>
</div>

JS：

<script type="text/javascript">
var component_row = <?php echo $component_row; ?>;
function addComponents(language_id) {
    html = '  <tr id="component-row' + component_row + '">';
    html += '  <td class="text-right"><input type="text" name="component_module[' + component_row + '][component_name]" value="" class="form-control" /></td>';
    html += '  <td class="text-right component-dropdown"><div class="component-dropdowns"> <select name="component_module[' + component_row + '][component_type]" id="bobo" ><option value=""><?php echo $text_select; ?></option><option value="Email"><?php echo "Email" ?></option><option value="Text Message"><?php echo "Text Message" ?></option><option value="Direct Mail"><?php echo "Direct Mail" ?></option><option value="Transnational Email"><?php echo "Transnational Email" ?></option><option value="EVENT"><?php echo "Event" ?></option> </select><div></td>';
    html += '  <td class="text-right component-dropdown"><div class="component-dropdowns"> <select name="component_module[' + component_row + '][component_status]" id="youda" ></select><div></td>';
    html += '  <td class="text-right component-dropdown"><div class="component-dropdowns"> <select name="component_module[' + component_row + '][component_owner]" ><option value=""><?php echo $text_select; ?></option><?php foreach ($users as $user) {?><option value="<?php echo $user['
    username ']; ?>" ><?php echo $user['
    username ']; ?></option><?php }?>  </select></div></td>';
    html += '  <td class="text-right" id="comp-cal"><div class="input-group date required"><input type="text" name="component_module[' + component_row + '][component_start_date]" placeholder="<?php echo $entry_date; ?>" data-date-format="YYYY-MM-DD"  class="form-control" /><span class="input-group-btn" id="component-calendar-btn">';
    html += '  <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button></span></div></td>';

    html += '  <td class="text-left"><button type="button" onclick="$(\'#component-row' + component_row + '\').remove();" data-toggle="tooltip" title="<?php echo $button_remove; ?>" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
    html += '</tr>';
    html += '  <input type="hidden" name="component_module[' + component_row + '][code]" value="<?php echo $code; ?>" class="form-control" readonly />';

    $('#components tbody').append(html);
    $('.date').datetimepicker({
        formatDate: 'yyyy-mm-dd',
        formatDate: 'yyyy-mm-dd',
        pickTime: false
    });
    component_row++;
}


$("component_module[' + component_row + '][component_type]").change(function () {
    if ($(this).val() == 'Email') {
        $("component_module[' + component_row + '][component_status]")
            .empty()
            .append($('<option>', {
                value: 'draft',
                text: 'Draft'
            }))
            .append($('<option>', {
                value: 'sent',
                text: 'Sent'
            }))
            .append($('<option>', {
                value: 'saved',
                text: 'Saved'
            }));


    } else if ($(this).val() == 'Text Message') {
        $("component_module[' + component_row + '][component_status]")
            .empty()
            .append($('<option>', {
                value: 'draft',
                text: 'Draft'
            }))
            .append($('<option>', {
                value: 'sent',
                text: 'Sent'
            }))
            .append($('<option>', {
                value: 'saved',
                text: 'Saved'
            }));

    } else if ($(this).val() == 'Direct Mail') {
        $("component_module[' + component_row + '][component_status]")
            .empty()
            .append($('<option>', {
                value: 'draft',
                text: 'Draft'
            }))
            .append($('<option>', {
                value: 'sent',
                text: 'Sent'
            }))
            .append($('<option>', {
                value: 'saved',
                text: 'Saved'
            }));

    } else if ($(this).val() == 'Transnational Email') {
        $("component_module[' + component_row + '][component_status]")
            .empty()
            .append($('<option>', {
                value: 'draft',
                text: 'Draft'
            }))
            .append($('<option>', {
                value: 'sent',
                text: 'Sent'
            }))
            .append($('<option>', {
                value: 'saved',
                text: 'Saved'
            }));

    } else {
        $("component_module[' + component_row + '][component_status]")
            .empty()
            .append($('<option>', {
                value: 'draft',
                text: 'Draft'
            }))
            .append($('<option>', {
                value: 'scheduled',
                text: 'Scheduled'
            }))
            .append($('<option>', {
                value: 'sent',
                text: 'Sent'
            }));

    }
});
      //--></script>

此图显示了新行的外观。用户可以添加尽可能多的内容。在提交时，每行都将作为自己的记录写入db

Answer 1

您正在使用.html()更新您的选择下拉列表，但它应该是例如

var options = ['option1', 'option2', 'option3'];
var select = $('#city');
for (i = 0; 1 < options.length; i++) {
    select.empty().append($('<option>', {
        value: i,
        text: options[i]
    }));
}

或者如果在你的代码中那就是

$('SELECT[name=component_module[' + component_row + '][component_status]]')
    .empty()
    .append($('<option>', {
        value: 'draft',
        text: 'Draft'
    }))
    .append($('<option>', {
        value: 'sent',
        text: 'Sent'
    }))
    .append($('<option>', {
        value: 'saved',
        text: 'Saved'
    }));