添加选定文本区域分隔为逗号

Question

选项

你能不能帮我lograte这个例子请：

我的下一个元素：

当您添加文本区域，我需要选择一个选项并用逗号分开，例如：

在这里，我选择一次选项：

后来此选项必须添加到文本区域，一些这样的：

和其他选择时，我选择其他选项，会发生同样的动作：

等，可以帮助，谢谢。

的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重复id S和无效。

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()。