将选择的选项添加到 TEXTAREA，以逗号分隔

Question

你能帮我记录这个例子吗：

我有下一个元素：

我需要在添加文本区域时选择一个选项并用逗号分隔，例如：

这里我选择一次选项：

以后这个选项一定要加到TEXTAREA中，有的是这样的：

在其他 SELECT 中，当我选择其他选项时，会发生相同的操作：

等等，可以帮忙，谢谢。

HTML 是：

    <select id="filter" name="filter">
    <option id="A" value="A">Option1</option>
    <option id="B" value="B">Option2</option>
    <option id="C" value="C">Option3</option>
    <option id="D" value="D">Option4</option>
</select>
<textarea name="key" id="field"></textarea>
<br>
<br>
<select id="filter2" name="filter2">
    <option id="A" value="A">Option1</option>
    <option id="B" value="B">Option2</option>
    <option id="C" value="C">Option3</option>
    <option id="D" value="D">Option4</option>
</select>
<br>
<br>
<select id="filter3" name="filter3">
    <option id="A" value="A">Option1</option>
    <option id="B" value="B">Option2</option>
    <option id="C" value="C">Option3</option>
    <option id="D" value="D">Option4</option>
</select>

Answer 1

var $texta = $('#field');
var $selects = $('select');
$selects.change(function () {
    var opts = $selects.find('option:selected').map(function () {
        return $.trim($(this).text());
    }).get();
    $texta.val(opts.join())
}).change();

演示：Fiddle

Answer 2

$("#filter,#filter2,#filter3").change(function(){
    $("#field").val(
        [$(":selected", "#filter").text(),
         $(":selected", "#filter2").text(),
         $(":selected", "#filter3").text()
        ].join(",")
    );
});

演示：http://jsfiddle.net/DerekL/KJL4F/

顺便说一句，您的 HTML 中有重复的 ids，这是无效的。

Answer 3

我建议使用类名来关联相关的select 元素（在本例中我使用了class="selectFilters"），从而导致以下 jQuery：

$('.selectFilters').on('change', function(){
    $('#field').val(function(){
        return $('.selectFilters').map(function(){
            return $(this).find('option:selected').text();
        }).get().join(', ') + '.';
    });
});

JS Fiddle demo.

但是，如果您只想获取那些已被用户更改的值，您可以在这些元素上设置一个属性，最初为 false，它可以跟踪它们是否已被修改（适当地调用，在这种情况下，modified)：

$('.selectFilters').prop('modified', false).on('change', function(){
    this.modified = true;
    $('#field').val(function(){
        return $('.selectFilters').map(function(){
            if (this.modified) {
                return $(this).find('option:selected').text();
            }
        }).get().join(', ');
    });
});

JS Fiddle demo.

为了允许用户打开select 然后决定默认选项是最佳选择的情况，我还使用了blur 功能（不是而不是，为了让textarea 在option 更改后立即更新）：

$('.selectFilters').prop('modified', false).on('change blur', function(){
    this.modified = true;
    $('#field').val(function(){
        return $('.selectFilters').map(function(){
            if (this.modified) {
                return $(this).find('option:selected').text();
            }
        }).get().join(', ');
    });
});

JS Fiddle demo.

顺便说一句，您必须避免在您的 HTML 中出现重复的 id 属性（id 只能在整个文档中使用一次，以便有效），此外，虽然 HTML5 允许 id 以数字字符开头，但在 CSS 中选择这些元素仍然很尴尬（在 option 元素的情况下，这不是问题，因为 CSS 不能/不能' 对它们做的不多；对于其他元素，这更像是一个问题）。

另外，您使用大量 HTML 来设置内容样式（主要是 <br /> 元素）；不要：HTML 应该显示内容，CSS 应该设置它的样式。例如：

select, textarea {
    display: block;
    width: 12em;
    box-sizing: border-box;
    margin: 0 0 1.5em 0;
}

JS Fiddle demo.

参考资料：

• find()。
• get()。
• map()。
• on()。
• prop()。
• text()。