CODEWITHSUNDEEP
javascriptjqueryhtmlarrays
butaminas
butaminas

Reputation: 840

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

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

Upvotes: 3

Views: 6856

Answers (1)

Rahul Patel
Rahul Patel

Reputation: 5244

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>

Upvotes: 3

Related Questions