jQuery - 将值添加到 textarea 时添加换行符答案

【问题标题】：jQuery - Adding a line break when value is added to textareajQuery - 将值添加到 textarea 时添加换行符
【发布时间】：2015-08-07 14:06:36
【问题描述】：

目前，当您单击下拉菜单时，选择一个选项并单击任何复选框，它会向文本框添加一个值。但是，当我添加第二个值时，它会直接输入到第一个值旁边。我将如何添加换行符？

Fiddle

jQuery

 $(document).ready(function () {
        $('.group').hide();
        $('#selectMe').change(function () {
            $('.group').hide();
            $('#' + $(this).val()).show();
        })
    });

    var courses = {
        course1: 'BIS 445 UCC lvl8 ',
        course2: 'Commerce 475 UCC lvl8 ',
        course3: 'Economics 350 UCD lvl8 ',
        course4: 'Government 405 UL lvl8 ',
        course5: 'Medicine 600 UCC lvl8',
        course6: 'Nursing 500 UCC lvl8'
    }

    var $mytextbox = $('#courses');

    $("input[type='checkbox'][name*='course']").change(function () {
        var $chk = $(this);
        if ($chk.prop('checked')) {
            $mytextbox.val($mytextbox.val() + courses[$chk.attr('name')]);
        } else {
            $mytextbox.val($mytextbox.val().replace(courses[$chk.attr('name')], ""));
        }
    });

【问题讨论】：

标签： jquery

【解决方案1】：

在<textarea> 输入中，通过在行尾插入\n 来创建换行符，从而创建一个新行。

修改您的代码，如下所示：

$("input[type='checkbox'][name*='course']").change(function () {
    var $chk = $(this);
    if ($chk.prop('checked')) {
        $mytextbox.val($mytextbox.val() + courses[$chk.attr('name')] + "\n");
    } else {
        $mytextbox.val($mytextbox.val().replace(courses[$chk.attr('name')] + "\n", ""));
    }
});

我已更新您的 JSFiddle here 以演示其工作原理。重要的是要记住在选中和取消选中课程时更新\n 字符的插入和删除。如果不在两个位置插入和删除 \n 字符，您可能会遇到不希望的结果，例如课程之间的多行。

【讨论】：

【解决方案2】：

您可以只添加一个换行符。见：

Add a linebreak in an HTML text area

"\n" 或 &vbCrLf

类似

$mytextbox.val($mytextbox.val() + "\n" +  courses[$chk.attr('name')]);

【讨论】：