CodeIgniter，Jquery - 在表单中附加下拉菜单

Question

您好，我需要一些帮助。我在 CodeIgniter 中创建了一个表单，我想在其中保存电影的名称和参与其中的演员。我的代码如下所示：

<?php echo form_open().PHP_EOL; ?>

    <div class="form-group">
        <label for="title">Title *</label>
        <?php echo form_input('title', set_value('title', html_escape($movie->title)), 'class="form-control"'); ?>
        <?php echo form_error('title'); ?>
    </div>

    <h4>Cast</h4>
    <button type="button" id="add_actor" class="btn btn-primary btn-sm">Add Actor</button>
    <hr>
    <ul class="list-unstyled" id="cast"></ul>

    <div class="form-group">
        <?php echo form_submit('save', 'Save', 'class="btn btn-primary"').PHP_EOL; ?>
    </div>

<?php echo form_close().PHP_EOL; ?>

<script>
$(document).ready(function() {
    var output = '<li style="margin-bottom:5px;">\
                <div class="row">\
                    <div class="col-md-6">\
                        <?php echo form_dropdown("actors", $actors, null, "class=\"form-control\""); ?>\
                    </div>\
                    <div class="col-md-6">\
                        <input type="text" name="character[]" class="form-control"\ placeholder="Character" />\
                    </div>\
                </div>\
            </li>';

    $('#add_actor').click(function() {
        $('#cast').append(output);
    });
});

在萤火虫上我得到这个作为输出：

<script>
    $(document).ready(function() {
        var output = '<li style="margin-bottom:5px;">;\
                    <div class="row">;\
                        <div class="col-md-6">;\
                            <select name="actors" class="form-control">
<option value="5">Keira Knightley</option>
<option value="7">Matthew Goode</option>
<option value="6">Benedict Cumberbatch</option>
<option value="2">Christian Bale</option>
<option value="10">Jude Law</option>
<option value="4">Daniel Craig</option>
<option value="3">Brad Pitt</option>
<option value="1">Johnny Depp</option>
<option value="9">Sean Bean</option>
<option value="8">Pierce Brosnan</option>
<option value="11">Ed Harris</option>
<option value="12">Judi Dench</option>
</select>\
                        </div>\
                        <div class="col-md-6">\
                           <input type="text" name="character[]" class="form-control"\ placeholder="Character" />\
                        </div>\
                    </div>\
                </li>';

        $('#add_actor').click(function() {
            $('#cast').append(output);
        });
    });
</script>

我可能猜到这个错误是因为 form_dropdown() 在行尾没有 \。

所以我基本上要做的是，当我单击“添加演员”按钮时，jquery 将在我的表单中附加一行，它应该有一个用于选择演员的下拉菜单，并且在这个下拉菜单旁边有一个输入用于输入电影中演员角色的字段。当我再次单击“添加演员”按钮时，我将再次进入相同的过程以输入电影中的下一个演员，等等。

然而脚本标签中的代码并没有像我预期的那样工作，事实上 jquery 抱怨语法错误。我正在检查我的代码并尝试一些更改但没有效果。

我怎样才能使它正常工作？

Answer 1

您应该在控制台中看到类似 Uncaught SyntaxError: Unexpected token ILLEGAL 的错误，因为您的字符串文字格式不正确。

在每行末尾添加\output

var output = '<li style="margin-bottom:5px;">\
                    <div class="row">\
                        <div class="col-md-6">\
                            <?php echo form_dropdown("actors", $actors); ?>\
                        </div>\
                        <div class="col-md-6">\
                            <input type="text" name="character[]" class="form-control"\ placeholder="Character" />\
                        </div>\
                    </div>\
                </li>';

如果不告诉编译器该字符串在下一行继续，您不能在字符串文字的中间开始新行，因此在您的情况下，您可以使用上面给出的 \ 运算符来表示.

演示：Fiddle