Add and Remove List item using javascript

css3transition

7 years ago

Add and Remove List item using javascript :

It is a very usefull plugin for those who want to add and remove list item from one list to another list or who want to switch item from one div to another div. here you will get two buttons which will functioning differently to each other. It is a very help data list for sorting.
When you click on add button this will add selected item from one list to another list. You can add multiple list item on one click from the selection div .

If you click on remove button button this will remove all item from the storage div or list on click.

You are use this plugin to sort your dynamic data and sort your dynamic data list. This will also usefull to migrate data from one list to another list.

It is very simple on fronted to integrate.

How to use it:

Create a html structure for datalist : first of all we will create a html structure in this regards to use it with dynamic data or static array list.

HTML Structure

XHTML

<table border="0" cellpadding="0" cellspacing="15">
  <tr>
    <td id="location"><select name="Location" id="loc" multiple="multiple" required size="9">
        <option value="OPERATIONS">Operations</option>
        <option value="CCC">Contact Center</option>
        <option value="QA">QA Department</option>
        <option value="DS">DeSoto</option>
        <option value="PS">Palma Sola</option>
        <option value="LWR">Lakewood Ranch</option>
        <option value="NR">North River</option>
        <option value="SDL">SDL</option>
        <option value="FSC">FSC</option>
      </select></td>
    <td><button id="add" type="button">ADD ALL</button>
      <button id="rem" type="button">REMOVE ALL</button></td>
    <td><textarea id="selected" rows="10" readonly></textarea></td>
  </tr>
</table>

<tr>

<option value="OPERATIONS">Operations</option>

<option value="CCC">Contact Center</option>

<option value="QA">QA Department</option>

<option value="DS">DeSoto</option>

<option value="PS">Palma Sola</option>

<option value="LWR">Lakewood Ranch</option>

<option value="NR">North River</option>

</select></td>

<button id="rem" type="button">REMOVE ALL</button></td>

</tr>

</table>

Style for the structure: after creating html structure we will define some style to make it more effective for view.

Styling

CSS

table {
	width: 500px;
}
select {
	border: 1px solid #f2f2f2;
	color: #9E9E9E;
	padding: 10px;
	margin-right: 10px;
}
select option {
	padding: 3px 10px;
	background: none;
	transition: all 0.5s ease;
	cursor: pointer;
}
select option:hover {
	background: #fafafa;
}
button {
	border: none;
	outline: none;
	padding: 8px 15px;
	border-radius: 25px;
	font-size: 14px;
	color: #fff;
	opacity: 1;
	display: block;
	transition: all 0.5s ease;
	width: 150px;
	margin-bottom: 10px;
cursor-pointer;
}
button:hover {
	opacity: 0.8;
}
#add {
	background: #8BC34A;
}
#rem {
	background: #FF5722;
}
textarea {
	border: 1px solid #f2f2f2;
	color: #9E9E9E;
	padding: 10px 15px;
	margin-left: 10px;
	line-height: 20px;
}

table {

width: 500px;

}

select {

border: 1px solid #f2f2f2;

color: #9E9E9E;

padding: 10px;

margin-right: 10px;

}

select option {

padding: 3px 10px;

background: none;

transition: all 0.5s ease;

cursor: pointer;

}

select option:hover {

background: #fafafa;

}

button {

border: none;

outline: none;

padding: 8px 15px;

border-radius: 25px;

font-size: 14px;

color: #fff;

opacity: 1;

display: block;

transition: all 0.5s ease;

width: 150px;

margin-bottom: 10px;

cursor-pointer;

}

button:hover {

opacity: 0.8;

}

#add {

background: #8BC34A;

}

#rem {

background: #FF5722;

}

textarea {

border: 1px solid #f2f2f2;

color: #9E9E9E;

padding: 10px 15px;

margin-left: 10px;

line-height: 20px;

}

Adding javascript code to operate it: Add a jquery (any version you can use), we will use a jquery version as a library to use it. After that respectably we have to use javascript code.

Javascript Code

JavaScript

 $(document).on('change', '#reporttype', function() {
  var value = $(this).val();

  //var checklistreport = $("#checklistreport");
  //var locationreport = $("#locationreport");
  var location = $("#location");
  var employeelist = $("#employeelist");
  var chosendates = $("#chosendates");
  var formattype = $("#formattype");
  var submitbtn = $("#submitbtn");

  if (value == "checklistreports") {
    //checklistreport.show();
    //locationreport.hide();
    location.show();
    employeelist.show();
    chosendates.show();
    formattype.show();
    submitbtn.show();
  } else if (value == "locationreports") {
    //checklistreport.hide();
    //locationreport.show();
    location.show();
    employeelist.hide();
    chosendates.show();
    formattype.show();
    submitbtn.show();
  } else {
    //checklistreport.hide();
    //locationreport.hide();
    location.hide();
    employeelist.hide();
    chosendates.hide();
    formattype.hide();
    submitbtn.hide();
  }
});

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

$(document).on('change', '#reporttype', function() {

var value = $(this).val();

//var checklistreport = $("#checklistreport");

//var locationreport = $("#locationreport");

var location = $("#location");

var employeelist = $("#employeelist");

var chosendates = $("#chosendates");

var formattype = $("#formattype");

var submitbtn = $("#submitbtn");

if (value == "checklistreports") {

//checklistreport.show();

//locationreport.hide();

location.show();

employeelist.show();

chosendates.show();

formattype.show();

submitbtn.show();

} else if (value == "locationreports") {

//checklistreport.hide();

//locationreport.show();

location.show();

employeelist.hide();

chosendates.show();

formattype.show();

submitbtn.show();

} else {

//checklistreport.hide();

//locationreport.hide();

location.hide();

employeelist.hide();

chosendates.hide();

formattype.hide();

submitbtn.hide();

}

});

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';

}

Demo

Download

Categories: jquery