Home jquery Add and Remove List item using javascript

Add and Remove List item using javascript

16931
9
SHARE
Add and Remove List item using javascript

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.

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

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

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.

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

9 COMMENTS

  1. When someone writes an post he/she keeps the thought of a user in his/her brain that how a user can know it.
    Therefore that’s why this post is outstdanding. Thanks!

  2. Hi there, this weekend is pleasant in support of me, because this time i am reading
    this wonderful educational piece of writing here at my house.

LEAVE A REPLY

Please enter your comment!
Please enter your name here