Deleteing items out of select box

**msimmons** · Dec 13th, 2001, 03:45 PM

I know how to dynamicly add items, but I don't know how to delete them dynamicly. One way I could do it would be to outerHTML the whole box but that would require a database call in my situation and speed is always an issue...
is there an easy way to delete one item from a select box?
Thanks in advance,
Michael

**CiberTHuG** · Dec 13th, 2001, 04:25 PM

Code:

<html>
  <head>
    <script type="text/javascript">
      function removeOpt(index) {
        document.getElementById("mySelect").removeChild(document.getElementById("mySelect").childNodes[index]);
      }
    </script>
  </head>
  <body>
    <form name="myForm">
      <select id="mySelect">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </form>
    <div onclick="JavaScript:removeOpt(1);">Remove 1</div>
  </body>
</html>

It is official. I have decided that JavaScript is long winded and tempermental. And this is all because of the W3C DOM Spec and the ECMA bindings.

Oh, this is DOM 2, by the way.

**msimmons** · Dec 13th, 2001, 06:24 PM

It didn't quite work (it could be me). First I put it into my code and modified it. I get 'type mismatch' error (sugesting that the value i give it is not in the select). So I copied the code exactly (had to take out "javascript:" because it is redundant in an onClick) and it removed the options 1 at a time starting with 0 then 1 then 2.
Is that what was intended? I needed to delete specific ones by value (index).
Thanks,
Michael

**msimmons** · Dec 14th, 2001, 02:42 PM

i found a way:

Code:

function delSel() {
  o = parent.frames [0].document.all.PickHotel.options;
  for (var i=(o.length-1); i>=0; i--) {
    if (o[i].selected) {
      o[i] = null;
    }
  }
}

thanks,
michael

**CiberTHuG** · Dec 17th, 2001, 10:35 AM

As to "javascript" in the onClick attribute, it is habit. I don't know what the standards dictate.

The page I posted should remove "1", and then "2" which is the new number 1, and it shouldn't do any more. It should never remove "0".

The code you posted will not work in all browsers. "document.all" is not part of the DOM as far as I know. Admittedly the code I posted will not work in all browsers, but that is because not all browsers are up to date with the specs.

**msimmons** · Dec 17th, 2001, 11:01 AM

it continues to remove 0 and tries to remove from the empty select after that.
As far as I know 'document.all' is the same as 'document.forms["formname"]'
Thanks
Michael

Thread: Deleteing items out of select box

Thread Tools

Display

Deleteing items out of select box

Posting Permissions