将逗号选择的选项添加到TEXTAREA中

Question

请帮助我记录这个例子：

我有下一个要素：

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

这里我选择一次选项：

以后这个选项必须添加到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

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

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

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

Answer 2

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 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功能（而非而不是< / em>，以便在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()。