Introduction

This article explains how to easily add and remove multiple items from a ListBox in JavaScript as in the following:
add Multiple Items from the ListBox
Remove multiple items from the ListBox as in the following:
Remove multiple items from the ListBox
Step 1: For this, we will first use some controls like TextBox (txtValue) to add the value in the ListBox, ListBox (lstValue) and an Add and Delete Button as in the following:
  1. <input name="txtValue" type="text" />
  2. <input type="button" name="add" value="Add" onclick="addValue();" />
  3. <select name="lstValue" multiple>
  4. <option value="empty"></select>
  5. <input type="button" name="delete" value="Delete" onclick="deleteValue();" />
Step 2: Now we will write the code for adding the items in the ListBox like this:
  1. <script language="javascript" type="text/javascript">
  2. var i = 0;
  3. function addValue() {
  4. var v = document.form1.txtValue.value;
  5. // get the TextBox Value and assign it into the variable
  6. AddOpt = new Option(v, v);
  7. document.form1.lstValue.options[i++] = AddOpt;
  8. return true;
  9. }
  10. </script>
In this code
  1. document.form1.lstValue.options[i++] = AddOpt;
form1 is the name of the form and lstValue is the name of the ListBox and we will add the TextBox value in the form of the Option value (AddOpt) in the ListBox.
add the TextBox value in the ListBox
Step 3: Now we will write the code for deleting the value from the ListBox as in the following:
  1. function deleteValue() {
  2. var s = 1;
  3. var Index;
  4. if (document.form1.lstValue.selectedIndex == -1) {
  5. alert("Please select any item from the ListBox");
  6. return true;
  7. }
  8. while (s > 0) {
  9. Index = document.form1.lstValue.selectedIndex;
  10. if (Index >= 0) {
  11. document.form1.lstValue.options[Index] = null;
  12. --i;
  13. }
  14. else
  15. s = 0;
  16. }
  17. return true;
  18. }
In this Code
  1. if (document.form1.lstValue.selectedIndex == -1) {
  2. alert("Please select any item from the ListBox");
  3. return true;
  4. }
  6. The following code will be used to determine whether there are any items in the LisBox:
  8. while (s > 0) {
  9. Index = document.form1.lstValue.selectedIndex;
  10. if (Index >= 0) {
  11. document.form1.lstValue.options[Index] = null;
  12. --i;
  13. }
  14. else
  15. s = 0;
  16. }
Here we assign the SelectedIndex Value of the ListBox in the variable Index like this:
  1. Index = document.form1.lstValue.selectedIndex;
And set the value Null in that index like this:
the SelectedIndex Value of the ListBox
Here we select the Value Nidhi and delete it:
select the Value and delete from ListBox
Now we will delete the Multiple Items from the ListBox like this:
delete the Multiple Items from the ListBox
So when we click on the Delete Button then the result will be:
Delete Button