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);
    });
});

在 firebug 我得到这个作为输出：

<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()行尾没有\.

所以我基本上想做的是，当我单击 "Add Actor" 按钮时，jquery 将在我的表单中添加一行，其中应该有一个用于选择演员的下拉菜单，在此下拉列表旁边是一个输入字段，用于输入电影中演员的角色。当我再次单击 "Add Actor" 按钮时，我将再次进入相同的过程以输入电影中的下一个演员，等等

然而脚本标签中的代码并没有像我预期的那样工作，事实上 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

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

CodeIgniter, Jquery - append dropdown menu in form

php

jquery

codeigniter

append