[thelist] IE-Select box render bug or my bad?

Tue Mar 13 04:01:14 CST 2001

Joshua OIson wrote:

> I am running the following code on IE 5.0:
> 
> <html>
> <head>
> <script language="JavaScript" type="text/javascript">
> <!--
> function addItem(email)
> {
> var newOption = document.createElement('OPTION');
> document.all.non_admin.add(newOption);
> newOption.innerText = email;
> newOption.value = email;
> }
> 
> function dropItem(email)
> {
> var t =
> document.all.non_admin.options[document.all.non_admin.selectedIndex];
> document.all.non_admin.removeChild(t)
> }
> 
> // -->
> </script>
> 
> </head>
> 
> <body>
> <form>
> <input type="text" name="non_admin_input">
> <input type="button" value=" ADD "
> onclick="addItem(document.all.non_admin_input.value);"><br>
> <select name="non_admin" size="5" style="width: 100%"></select><br>
> <input type="button" value=" DROP "
> onclick="dropItem(document.all.non_admin.value);">
> </form>
> </body>
> </html>
> 
> ----------------
> 
> If I add three or four items of increasing length, then drop a middle one,
> the select box seems to "chop" longer items.  Does anybody know why this
> happens?  I looked on MSDN for a bit to no avail.  Any ideas?

Why are you doing this with innerText and document.all type stuff. What's
wrong with the Option object?

I can't speak to style and rendering bugs but wouldn't the above be better
as:

<html>
<head>
  <script language="JavaScript" type="text/javascript">
    <!--
    function addItem(email)
    {
      var newOption = new Option(email,email);

document.forms[0].non_admin.options[document.forms[0].non_admin.options.leng
th]=newOption;
    }
    function dropItem()
    {

document.forms[0].non_admin.options[document.forms[0].non_admin.selectedInde
x]=null;
    }
    // -->
  </script>
</head>
<body>
  <form>
    <input type="text" name="non_admin_input">
    <input type="button"
     value=" ADD "
     onclick="addItem(this.form.non_admin_input.value);"><br>
    <select name="non_admin" size="5" style="width: 100%"></select><br>
    <input type="button"
     value=" DROP "
     onclick="dropItem();">
  </form>
</body>
</html>

--
Joe Crawford ||||||||||||||       mailto:jcrawford at avencom.com
||||||||||||||||||||||||             http://www.avencom.com
|||||||||||||||||||||||||||      Avencom: Set Your Sites Higher