JavaScript to jQuery code transformation

Question

I am trying to simplify this code and convert it into a jQuery statement. Will someone please show me how I can simplify this code using jQuery. This allows the user to select multiple options from a select and show the options chosen in a text area.

// JS for Showing Chosen Locations in textarea
 var opts = document.querySelectorAll('#loc option');
 document.getElementById('add').addEventListener('click', function() {
 for ( var i=0; i<opts.length; i++ ) {
 opts[i].selected = true;
 }
 reflectChange();
 });
 document.getElementById('rem').addEventListener('click', function() {
 for ( var i=0; i<opts.length; i++ ) {
 opts[i].selected = false;
 }
 reflectChange();
 });
 document.getElementById('loc').addEventListener('change', reflectChange);
 function reflectChange() {
 document.getElementById('selected').value = '';
 for ( var i=0; i<opts.length; i++ ) {
 if(opts[i].selected)
 document.getElementById('selected').value += opts[i].text+'\n';
 }
 }
 // End JS for Showing Chosen Locations in textarea
 // JS for Showing Chosen Associates in textarea
 var opts1 = document.querySelectorAll('#EmployeeName option');
 document.getElementById('add1').addEventListener('click', function() {
 for ( var i=0; i<opts1.length; i++ ) {
 opts1[i].selected = true;
 }
 reflectChange1();
 });
 document.getElementById('rem1').addEventListener('click', function() {
 for ( var i=0; i<opts1.length; i++ ) {
 opts1[i].selected = false;
 }
 reflectChange1();
 });
 document.getElementById('EmployeeName').addEventListener('change', reflectChange1);
 function reflectChange1() {
 document.getElementById('selected1').value = '';
 for ( var i=0; i<opts1.length; i++ ) {
 if(opts1[i].selected)
 document.getElementById('selected1').value += opts1[i].text+'\n';
 }
 }
 // End JS for Showing Chosen Associates in textarea

Any help would be greatly appreciated.

• 31piy: Well, you did provide the code, but the purpose is still not clear. What this code does, and what do you expect in the answer in terms of simplification?

Answer 1

As I mentioned in my comment, the purpose of this code isn't clear. The simplicity of the code depends on the use-case, because then only one can decide what to write.

Yet, I have tried to understand and simplify the code with jQuery. Refer to the following snippet:

// JS for Showing Chosen Locations in textarea
// Listens to the changes in #loc. Prepares the selected elements, and sets the result in
// #selected.
$("#loc").change(function() {
 var selected = [];
 $(this).find("option:selected").each(function() {
 selected.push($(this).text());
 });
 $("#selected").val(selected.join("\n"));
});
// Selects all the options, and manually triggers the change() of #loc
$("#add").click(function() {
 var loc = $("#loc");
 loc.find("option").prop("selected", true);
 loc.change();
});
// Deselects all the options, and manually triggers the change() of #loc
$("#rem").click(function() {
 var loc = $("#loc");
 loc.find("option").prop("selected", false);
 loc.change();
});
// End JS for Showing Chosen Locations in textarea
// JS for Showing Chosen Associates in textarea
// Listens to the changes in #EmployeeName. Prepares the selected elements, and sets the 
// result in #selected1.
$("#EmployeeName").change(function() {
 var selected = [];
 $(this).find("option:selected").each(function() {
 selected.push($(this).text());
 });
 $("#selected1").val(selected.join("\n"));
});
// Selects all the options, and manually triggers the change() of #EmployeeName
$("#add1").click(function() {
 var emps = $("#EmployeeName");
 emps.find("option").prop("selected", true);
 emps.change();
});
// Deselects all the options, and manually triggers the change() of #EmployeeName
$("#rem1").click(function() {
 var emps = $("#EmployeeName");
 emps.find("option").prop("selected", false);
 emps.change();
});
// End JS for Showing Chosen Associates in textarea

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="selected" cols="30" rows="10"></textarea>
<select id="loc" multiple>
 <option>loc1</option>
 <option>loc2</option>
 <option>loc3</option>
</select>
<button id="add">Add</button>
<button id="rem">Remove</button>
<hr>
<textarea id="selected1" cols="30" rows="10"></textarea>
<select id="EmployeeName" multiple>
 <option>emp1</option>
 <option>emp2</option>
 <option>emp3</option>
</select>
<button id="add1">Add</button>
<button id="rem1">Remove</button>

• David Brierton: This is almost exactly how I need it except when i click submit before anything is chosen and then hit the add buttons it does not register that they were added even though they are highlighted

Answer 2

// JS for Showing Chosen Locations in textarea
var opts = $('#loc option');
$('#add').on('click', function() {
 opts.prop('selected', true)
 reflectChange();
});
$('#rem').on('click', function() {
 opts.prop('selected', false)
 reflectChange();
});
$('#loc').on('change', reflectChange);
function reflectChange() {
 $('#selected').val('');
 opts.each(function(value,ind){
 $('#selected').val($(value).text + '\n');
 });
}
// End JS for Showing Chosen Locations in textarea
// JS for Showing Chosen Associates in textarea
var opts1 = $('#EmployeeName option');
$('#add1').on('click', function() {
 opts1.prop('selected', true);
 reflectChange1();
});
$('#rem1').on('click', function() {
 opts1.prop('selected', false);
 reflectChange1();
});
$('#EmployeeName').on('change', reflectChange1);
function reflectChange1() {
 $('#selected1').val('');
 opts1.each(function(value,ind){
 $('#selected1').val($(value).text + '\n');
 });
}
// End JS for Showing Chosen Associates in textarea

• David Brierton: this is not working it shows this in the textbox function ( value ) { return jQuery.access( this, function( value ) { return value === undefined ? jQuery.text( this ) : this.empty().append( ( this[0] && this[0].ownerDocument || document ).createTextNode( value ) ); }, null, value, arguments.length ); }