title: How to store values from multiple select fields to an array and update array on option change?
body: <p>I am trying to create a <em>textarea</em> box that is filled with values from select fields that are above it.</p>
  
  <p>There are 3 different select fields with different options, whenever an option is selected the value should be inserted in a textarea box. I have this part sorted out:</p>
  
  <pre><code>$("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+ " ");
  });
  </code></pre>
  
  <p>But now I need to change the words in the textarea whenever an option is changed. So for example:
  1st select is: test1, 2nd select: test2, 3rd select: test3
  Textarea: test1 test2 test3</p>
  
  <p>After changing test2 to test4, textarea should be: test1 test4 test3</p>
  
  <p>The select fields are in a repeater, meaning that there may be 3 or 10 select fields, so I need this to work dynamically regardless of how many select fields there are.</p>
  
  <p>I though the best way doing this would be putting all words in an array and then changing the array values on select change. Any ideas on how could I do this?</p>
  
  <p>Thanks.</p>
  
  <hr>
  
  <p>Thanks to Rahul Patel I figured it out:</p>
  
  <pre><code>$("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(' '));
  });
  </code></pre>
  
  <p>Added same class to all fields. Works like a charm!</p>