Is this a bug of IE regarding select?

[Sophie Cameron]

Hi everyone,

In a multi select, if you pick an item and scroll down so that the item is not visible, deleting the selected item will result in a blank entry in the select.

Here is an example.

<script type="text/javascript">

function remove() {
theSelect = document.myForm.mySelect;

while (theSelect.selectedIndex > -1) {
theSelect.remove(theSelect.selectedIndex);
}
}

</script>

<form name="myForm">

<select name="mySelect" size="3" multiple="yes">
<option value="1"/>1
<option value="2"/>2
<option value="3"/>3
<option value="4"/>4
<option value="5"/>5 longer one
</select>

<input type="button" value="Remove" onclicc="remove()"/>

</form>

Is this a bug of IE or there is a getaround?

Thanks,

[Eric Pascarello]

Are you talking about after you remove all of the options?

That is what IE does, add a blank select like that and you can select the first blank.

Eric

[Sophie Cameron]

No, I'm not talking about removing all of the options. I'm talking about removing ONLY ONE option.

Choose one option, scroll down so that it is not visible, and remove it. You'll see a blank option there.

That's not what is expected. The options array should have been compressed but actually not.

In the sample code, there are five options. After removing ONLY FIRST option following the steps, there are still five options there. The difference is that the first one is blank.

Thanks,

[Eric Pascarello]

What version of IE is this in? I am using IE6 and I have no problems

Eric

[Sophie Cameron]

I'm also using IE6. To see the problem, you need to following the steps I provided. The point is that you have to scroll the select so that the selected option is NOT visible and then remove it by clicking the button.

It seems that the document needs reloading. I tried that but didn't help.

Thanks,

[Carl Pettersson]

Works fine for me too, but why do you have while(...) { remove() } ? Wouldn't an if(){ } be better?

[Sophie Cameron]

I just ran the sample code again and the problem is still there. Remember to change the

onclicc

to

onclick

.

Thanks,

[Eric Pascarello]

Try doing this instead:

while (theSelect.selectedIndex > -1) {
theSelect.options[theSelect.selectedIndex] = null;
}

Eric

[Eric Pascarello]

I see the issue, the line of coe above does not fix it. Don;t think there is anything you can do other than re-adding all the values (eewww)

Eric

[Sophie Cameron]

Hi Eric,

I'm happy you saw the issue.

Can you clarify your last response? I just didn't get your point.

Thanks,

[Jason Liao]

Does anybody have answers for this post? I repeated in IE6(sp2)( use onclick instead!!) but it works fine in FireFox.

I am afraid it's a bug of IE 6.0.

Thanks for reply.

[Eric Pascarello]

Could bring the value into view (select the item again) and then remove it. Simple if it was not a multiple select.

Eric

[Eric Pascarello]

AH, here

<script type="text/javascript">
 
  function remove() {
    theSelect = document.myForm.mySelect;
 
    var arrValues = new Array();
 
    for(var i = 0; i<theSelect.options.length; i++) {
      if(theSelect.options[i].selected)arrValues[arrValues.length] = i;
    }
 
    for(i = arrValues.length-1;i>=0;i--){
      theSelect.selectedIndex = arrValues[i];
      theSelect.remove(arrValues[i]);
    }
 
  }
 
</script>
<form name="myForm">
  <select name="mySelect" size="3" multiple="yes">
    <option value="1"/>1
    <option value="2"/>2
    <option value="3"/>3
    <option value="4"/>4
    <option value="5"/>5 longer one
  </select>
  <input type="button" value="Remove" onclick="remove()"/>
 
</form>

Eric

[Jason Liao]

Hi. Eric,

Thanks for your quick response, but the blank option is still there.

here are the steps to repeat
(1) select "2"
(2) scroll down untill you can not see it
(3) click "remove" button
(4) There is a black option between "1" and "3"

if you click the blank area, you get "3".(Duplcate "3"!).

It's Ok in feature but the blank is ugly. ( it does not appear in FireFox).

Anyway, thanks a lot for your effort.


Jason