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

Question

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(' '));
});

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

Rahul Patel · Accepted Answer · 2016-09-04 11:40:48Z

3

Give same class to all the dropdowns. And onchange event of any dropdown values of dropdown will be fetched and appended and values will be assigned in textarea.

$("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>

edited Sep 4, 2016 at 11:40

answered Aug 31, 2016 at 14:15

Rahul Patel

5,2342 gold badges16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

butaminas Over a year ago

What if select fields has different names? Check my updated code in original post.

Rahul Patel Over a year ago

I am not on computer currently will update the code according later on and will update you.

butaminas Over a year ago

Figured out myself. Added same class to all fields and used text() instead of val() (I have different values) and it finally works. Added a working solution to my original post. Let me know if you have a better solution, otherwise - THANKS A LOT!

Rahul Patel Over a year ago

That's great.. I was planning to give same solution too.. :)

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related