複数の選択フィールドの値を配列に格納し、オプションの変更時に配列を更新する方法はありますか？

Question

テキストエリアボックスを作成しようとしていますが、その上にある選択フィールドの値が入力されています。

オプションが異なる3つの選択フィールドがあります。オプションが選択されると、その値はテキストエリアボックスに挿入されます。私はこの部分を並べ替えました：

$("select[name='vehicle_part[]']").change(function() { 
    var optionSelected = $("select[name='vehicle_part[]'] option:selected").html(); 
    $("#textareaObservation").html($('#textareaObservation').text() + optionSelected+ " "); 
}); 
$("select[name='damage_type[]']").change(function() { 
    var optionSelected = $("select[name='damage_type[]'] option:selected").html(); 
    $("#textareaObservation").html($('#textareaObservation').text() + optionSelected+ " "); 
}); 
$("select[name='part_status[]']").change(function() { 
    var optionSelected = $("select[name='part_status[]'] option:selected").html(); 
    $("#textareaObservation").html($('#textareaObservation').text() + optionSelected+ " "); 
}); 

しかし、私はオプションが変更されたときはいつでも、テキストエリア内の単語を変更する必要があります。だから、例えば： は、select第一です：test1の、第二選択：test2は、第三選択：test3に テキストエリア：TEST1 TEST2 TEST3

TEST4するTEST2を変更した後、テキストエリアは次のようになります。test1のTEST4 test3に

選択フィールドリピータにあります。つまり、3つまたは10つの選択フィールドがある可能性があるため、選択フィールドの数に関係なく、動的に作業する必要があります。

私はこれを行う最善の方法は、すべての単語を配列に入れて、選択変更時に配列値を変更することです。どのように私はこれを行うことができます上の任意のアイデア？

ありがとうございました。

---

私はそれを考え出したラーフル・パテルのおかげで：

$("select.superSelect").change(function() { 
    var selectedOptions = []; 
    $("select.superSelect option:selected").each(function(){ 
     var value = $(this).text(); 
     if($.trim(value)){ 
      selectedOptions.push(value.trim()); 
     } 
    }); 

    $("#textareaObservation").html(selectedOptions.join(' ')); 
}); 

は、すべてのフィールドに同じクラスを追加しました。魅力的な作品！

Answer 1

すべてのドロップダウンに同じクラスを指定します。ドロップダウンのドロップダウン値のonchangeイベントがフェッチされ、追加され、値がテキストエリアに割り当てられます。

$("select[name='vehicle_part[]']").change(function() { 
    var selectedOptions = []; 
    $("select[name='vehicle_part[]'] option:selected").each(function(){ 
     selectedOptions.push($(this).text()); 
    }); 
    $("#textareaObservation").html(selectedOptions.join(' ')); 
}); 

$("select.superSelect").change(function() { 
 
    var selectedOptions = []; 
 
    $("select.superSelect").each(function(){ 
 
     var value = $(this).val(); 
 
     if($.trim(value)){ 
 
      selectedOptions.push(value); 
 
     } 
 
    }); 
 
    $("#textareaObservation").html(selectedOptions.join(' ')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="vehicle_part[]" class="superSelect"> 
 
    <option value="">Select</option> 
 
    <option value="test1">test1</option> 
 
    <option value="test2">test2</option> 
 
    <option value="test3">test3</option> 
 
</select> 
 
<select name="damage_type[]" class="superSelect"> 
 
    <option value="">Select</option> 
 
    <option value="test1">test1</option> 
 
    <option value="test2">test2</option> 
 
    <option value="test3">test3</option> 
 
</select> 
 
<select name="part_status[]" class="superSelect"> 
 
    <option value="">Select</option> 
 
    <option value="test1">test1</option> 
 
    <option value="test2">test2</option> 
 
    <option value="test3">test3</option> 
 
</select> 
 
<textarea id="textareaObservation"></textarea>