如何将多个选择字段中的值存储到数组并在选项更改时更新数组？

Question

我正在尝试创建一个 textarea 框，其中填充了来自其上方的选择字段的值。

有3个不同的选择字段，选择不同的选项，只要选择一个选项，应将值插入TextAlea框中。这部分我已经整理好了：

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

但是现在，每当更改选项时，我都需要更改文本区域中的单词。例如： 第一个选择是：test1，第二个选择：test2，第三个选择：test3 文本区域：test1 test2 test3

将test2改为test4后，textarea应该是：test1 test4 test3

选择字段位于重复器中，这意味着可能有 3 或 10 个选择字段，因此无论有多少选择字段，我都需要它动态工作。

我认为最好的方法是将所有单词放入一个数组中，然后在选择更改时更改数组值。关于我该怎么做的任何想法？

谢谢。

---

感谢 Rahul Patel，我想通了：

$("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事件将被获取并附加，并且值将在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>