Q547 How do I delete an element from an options array?

You are here: irt.org | FAQ | JavaScript | Object | Q547 [ previous next ]

Just set it to null, e.g.:

<form>
<select name="mySelect">
<option>First
<option>Second
<option>Third
<option>Fourth
</select>
<input type="button" onClick="this.form.mySelect.options[this.form.mySelect.selectedIndex] = null">
</form>

This does not work in Internet Explorer 3.

The following was submitted by John Warren

This example will allow you to select multiple items in listbox A and inserting them into listbox B. In addition, the code allows for the inserting of values typed into a textbox to be inserted into listbox B as well. Finally, the code allows you to delete single or multiple items from listbox B.

enjoy!

<BODY>

<FORM name=oform>

<SELECT NAME="SelectBox1" MULTIPLE>
<OPTION>Value1
<OPTION>Value2
<OPTION>Value3
<OPTION>Value4</SELECT>
	
<INPUT TYPE=button onClick="Populate()" VALUE="|------>">
<SELECT NAME="SelectBox2" MULTIPLE></SELECT>
<INPUT TYPE=button onClick="UnPopulate()" VALUE="Remove">      <br><br>
<INPUT TYPE="TEST" name="NEWITEM">
<INPUT TYPE=button onClick="AddItem()" VALUE="Add Item">      <br><br>
</FORM>

<SCRIPT LANGUAGE="JavaScript"><!--
var frm=document.oform
var field1=frm.SelectBox1
var field2=frm.SelectBox2

var x =0;

function Populate() {
  for (i=0;i<field1.length;i++) {
    if (field1.options[i].selected) {
      newOpt=field1.options[i].text
      newOptX=field1.options[i].value
      field2.options[x] = new Option(newOpt,newOptX);
      x++;
    }
  }
}

function UnPopulate() {
  var t = field2.length-1;

  for(i=t;i >= 0;i--) {
    if (field2.options[i].selected) {
      field2.options[i] = null;
      x--;
    }
  }
}

function AddItem() {
  var l = field2.length;

  newOpt=document.oform.NEWITEM.value
  field2.options[l] = new Option(newOpt,newOpt);
  x++;
}


//--></SCRIPT>

</BODY>

The following was submitted by Kalyani

You can use remove method to delete an element of the options array.

<html>
<body>
<form>
<select name="sel">
  <option>1
  <option>2
  <option>3
  <option>4
  <option>5
</select>
<input type="Button" value="Delete" onclick="this.form.sel.options.remove(this.form.sel.selectedIndex)">
</form>

</body>
</html>