Изменение зависимых выпадающих опций ввода для динамически добавляемых строк

Anon_guy спросил: 13 октября 2017 в 07:36 в: javascript

Я работаю в OpenCart MVC, и у меня есть форма, в которой есть раздел, который позволяет добавлять строки входов. Каждая строка при отправке становится отдельной записью. [Статус раскрывающегося входа] должен зависеть от [Тип раскрывающегося ввода]. Если [Тип раскрывающегося ввода] является электронной почтой, то [В раскрывающемся списке ввода] будет отображаться один набор параметров, а если [Тип раскрывающегося ввода] отображает событие, то [Состояние раскрывающегося ввода] отображает другой набор параметров.

У меня есть рабочий Codepen о том, как это должно работать.

У меня проблема с добавлением этого в мой код. Строки добавляются в форму с помощью JQuery. каждая строка имеет добавочный компонент component_row для учета отдельных записей. Я попытался добавить имя SELECT в скрипт, который я использую, но пока не могу заставить его работать правильно (не меняет параметры ввода).

В настоящее время в форме тип ввода показывает правильность опции (считанные из таблицы), однако Статус ввода пуст и выбор параметра Тип ввода никак не влияет на Статус ввода (это влияет на код). В разделе HTML-кода отображаются существующие записи при посещении через контроллер редактирования. На контроллере Add изначально нет строк, пользователь может добавить столько, сколько ему хотелось бы, нажав кнопку "плюс". Эти строки добавляются через первый скрипт, который я перечислил 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

0 ответов