clearing the elements of combo boxes

[blindbull]

Using the HTML select tag I have created two multiple choice pull-down menus that appear as list boxes.

Below I have listed the text followed by the value of each element in listbox 1:

Text: Microsoft Office Resource Kit
Value: 15

Text: Clean Up Utility
Value: 6

Text: Netscape
Value: 16

Listbox 2 has 200 elements but three of them correspond to the three elements above that are from listbox 1.

When the page is loaded if an element exists in listbox 1 than the corresponding element must be removed from listbox 2.

I am using the onload event to run some JS code to do this. I am having trouble. I think that it is because when I delete the element from list2 the indexes are screwed up. I can post the code I have written if it helps. However, I don't think it is very good.

Has anyone carried out a task like this and maybe has a solution?

[neil.c]

it would help to see the code so i could see exactly what you want to do.

to clear a combo box, you have to do this: it assigns null to every option starting at the bottom.

var cboBox = document.theForm.theCombo //reference to combo
var vLength = cboBox.length - 1
for (i = vLength; i >= 0; i --){
cboBox.options[i] = null
}

to just take out one, you would have to do something like this:

var cboBox = document.theForm.theCombo //reference to combo
var vDelete = 15 //index of item to delete eg 15 for the 16th item
for (i = vDelete; i < cboBox.length - 2; i ++){
cboBox.options[i] = cboBox.options[i+1]
}
cboBox.options[cboBox.options.length-1] = null

the above goes through every option starting at the one to delete, and copies the data from the next option into it. finally, it deletes the last option.
ok? :thumbsup:

[joh6nn]

neil, JavaScript does that automatically. you'd have to do that with an Array ( which i hate), but with a selectbox, it's done automatically. all you have to do is set the appropriate option to null.

if i understand what you're asking for, Bull, then here's some pseudo code that's in the right direction:

var select1 = document.theForm.selectbox1;
var select2 = document.theForm.selectbox2;
for ( var i = 0; i < select1.length; i++ ) {
for ( var j = 0; j < select2.length; j++) {
if ( select1.options[i].text == select2.options[j].text) {
select2.options[j] = null; break;
}
}
}

i think that will do what you want, but i'm not sure.

[mordred]

Originally posted by joh6nn
neil, JavaScript does that automatically. you'd have to do that with an Array ( which i hate), but with a selectbox, it's done automatically. all you have to do is set the appropriate option to null.

The part with the array would interest me. I don't think it's necessary to take the approach posted by neil.c just to delete an element of an array, but I may be mistaken. Care to elaborate?

[jkd]

You can remove a single option without doing any fancy stuff like so:

var select = refToSelect;
select.removeChild(select.options[INDEX]);

That should reorder the options array for you as well. (in theory)

[joh6nn]

last i knew, and according to the Guide, if you simply delete an element of an Array, then that slot of the Array is set to undefined, and all of the other slots remain in place. so if you delete slot 4 of 7 slot array then you get

[0] something
[1] something
[2] something
[3] something
[4] undefined
[5] something
[6] something
[7] something

jkd's method for selects will work too, but only in DOM capable browsers. just so you know.

[mordred]

Are you using the "delete" operator to delete elements from an array? Your description suggests that this is the case.

I'll always delete entries with Array.splice() - that removes specified elements completely and adjusts the length property. For your example, it would be

myArrayVariable.splice(4, 1);

Works for me in IE5.5, NN4.7, Moz 1.0, Opera 6.

BTW, the Guide p. 440. A great book it is.

[joh6nn]

i was referring to using delete, yes, because that was the closest parallel to how we were working with a the selectbox. admittedly, i'd forgotten about splice, since i don't use it much, but, you can't use splice with the selectbox, so ::shrug::

[blindbull]

Thanks for the help. I used code for this and it gave me an elegant solution and was very useful.