Question

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

我有一个工作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'
    }));

在动态添加的行

1 个答案: