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

时间:2015-02-19 07:10:35

标签: php jquery codeigniter append

嗨,我想要一些帮助。我在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()在行尾没有\而引起的。

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

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

我该如何正常工作?

1 个答案:

答案 0 :(得分:0)

您应该在控制台中看到类似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