butaminas butaminas - 3 months ago 8
HTML Question

How to store values from multiple select fields to an array and update array on option change?

I am trying to create a textarea box that is filled with values from select fields that are above it.

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:

$("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+ " ");
});


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

After changing test2 to test4, textarea should be: test1 test4 test3

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.

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?

Thanks.




Thanks to Rahul Patel I figured it out:

$("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(' '));
$(".link.clone").fadeIn();
});


Added same class to all fields. Works like a charm!

Answer

Please use below javascript code.

$("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[name='vehicle_part[]']").change(function () {
  var selectedOptions = [];
  $("select[name='vehicle_part[]']").each(function(){
    var value = $(this).val(); //.val() will be better
    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[]">
  <option value="">Select</option>
  <option value="test1">test1</option>
  <option value="test2">test2</option>
  <option value="test3">test3</option>
</select>
<select name="vehicle_part[]">
  <option value="">Select</option>
  <option value="test1">test1</option>
  <option value="test2">test2</option>
  <option value="test3">test3</option>
</select>
<select name="vehicle_part[]">
  <option value="">Select</option>
  <option value="test1">test1</option>
  <option value="test2">test2</option>
  <option value="test3">test3</option>
</select>
<textarea id="textareaObservation"></textarea>