Multiple selection problem with 2 <select> objects in firefox

Hi everyone,

I am trying to make selection box. The way it works is that there are 2 <select> objects. Available options are in the first box and when the user selects an option and clicks add, that option appears in the second box.

The code is working perfectly fine with IE7 but not on FireFox.

Here are the code and html below:

<script type="text/javascript">
function addSelect(box) {
	var i;

	var box_element = document.getElementById(box+"_box");
	var sel_element = document.getElementById(box+"_sel_box");

	for (i=0; i<box_element.length; i++) {
		var selected = false;

		if (box_element.options[i].selected) {
			var j;
			text = box_element.options[i].text;
			value = box_element.options[i].value;

			for (j=0; j<sel_element.length; j++) {
				val = sel_element.options[j].value;

				if (val == value)
					selected = true;
			}

			if (!selected) {
				var optn = document.createElement("option");
				optn.text = text;
				optn.value = value;

				sel_element.add(optn);
			}

			box_element.options[i].selected = false;
		}
	}
}

function removeSelect(box) {
	var i;

	for (i=document.getElementById(box+"_sel_box").length-1; i>=0; i--) {
		if (document.getElementById(box+"_sel_box").options[i].selected) {
			value = document.getElementById(box+"_sel_box").options[i].value;

			document.getElementById(box+"_sel_box").remove(i);
		}
	}
}
</script>

<div id="languagebox">
<table align="center">
	<tr class="style1">
		<td width="200">
			Available Languages<br>
			<br>
			<select name="languages_box" id="languages_box" style="width: 175px; height: 200px" multiple="multiple" ondblclick="addSelect('languages');">
				<option value="English">English</option>
				<option value="French">French</option>
				<option value="German">German</option>
			</select>
		</td>
		<td style="width: 100px">
			<input type="button" border="0" value="add" onclick="addSelect('languages');">
			<br><br>
			<input type="button" border="0" value="remove" onclick="removeSelect('languages');"></td>
		<td width="200">
			Selected Languages<br>
			<br>
			<select name="languages_sel_box" id="languages_sel_box" style="width: 175px; height: 200px" multiple="multiple" ondblclick="removeSelect('languages');">
			</select>
		</td>
	</tr>
</table>
</div>

HTML:

Hope someone can help.

Cheers.

 

Hello,

Instead of:

sel_element.add(optn);

Use:

sel_element.appendChild(optn);

Cheers

 

Thanks a lot. Works just fine now.

 

You're welcome...