添加選定文本區域分隔爲逗號

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