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!
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.