[SOLVED] Move from one <select> to another?

Northern Flame · January 1, 2008

I want to create two <select> tags, one will be a list of available songs

and the other will be a list of songs the user want to use to generate

a code for a music player, heres my code so far:

<html>
<head>
	<title>
		Test
	</title>
	<script type="text/javascript">
		// var changed & id
		function fun0(){
			var changed = document.getElementById('0').value;
			var id = 0;
		}
		function fun1(){
			var changed = document.getElementById('1').value;
			var id = 1;
		}
		function fun2(){
			var changed = document.getElementById('2').value;
			var id = 2;
		}
		function fun3(){
			var changed = document.getElementById('3').value;
			var id = 3;
		}
		function fun4(){
			var changed = document.getElementById('4').value;
			var id = 4;
		}
		function fun5(){
			var changed = document.getElementById('5').value;
			var id = 5;
		}
		function fun6(){
			var changed = document.getElementById('6').value;
			var id = 6;
		}

		// add/delete
		function addMe(){
			var add_old_info = document.getElementById('add').value;
			var delete_old_info = document.getElementById('delete').value;
			var add_new_info = add_old_info + "<option id=\"" + id + "\" onDblClick=\"fun" + id + "; deleteMe();\">" + changed + "</option>";
			var delete_new_info = delete_old_info.replace("<option id=\"" + id + "\" onDblClick=\"fun" + id + "; addMe();\">" + changed + "</option>", "");

			document.getElementById('add').innerHTML = add_new_info;
			document.getElementById('delete').innerHTML = delete_new_info;
		}
		function deleteMe(){
			var delete_old_info = document.getElementById('delete').value;
			var add_old_info = document.getElementById('add').value;
			var delete_new_info = add_old_info + "<option id=\"" + id + "\" onDblClick=\"fun" + id + "; addMe();\">" + changed + "</option>";
			var add_new_info = delete_old_info.replace("<option id=\"" + id + "\" onDblClick=\"fun" + id + "; deleteMe();\">" + changed + "</option>", "");

			document.getElementById('delete').innerHTML = delete_new_info;
			document.getElementById('add').innerHTML = add_new_info;
		}
	</script>
</head>
<body>
	<form method="POST">
		<table>
			<tr>
				<td>
					<select multiple id=delete size=6 name=delete>
						<option id="0" onDblClick="fun0; addMe();">Zero</option>
						<option id="1" onDblClick="fun1; addMe();">One</option>
						<option id="2" onDblClick="fun2; addMe();">Two</option>
						<option id="3" onDblClick="fun3; addMe();">Three</option>
						<option id="4" onDblClick="fun4; addMe();">Four</option>
						<option id="5" onDblClick="fun5; addMe();">Five</option>
						<option id="6" onDblClick="fun6; addMe();">Six</option>
					</select>
				</td>
				<td>
					<select multiple id=add size=6 name=add>
						<option></option>
					</select>
				</td>
			</tr>
		</table>
	</form>
</body>
</html>

I want the user to be able to double click the value and then have it move

to the other select box on the double click. But when I run this page,

nothing happens. Can anyone tell me what I am doing wrong?

duclet · January 1, 2008

I think this has what you wanted:

http://www.dhtmlgoodies.com/index.html?whichScript=multiple_select

Northern Flame · January 2, 2008

Thank You So Much!

Thats Exactly What I Wanted!

Sign In

[SOLVED] Move from one <select> to another?

Recommended Posts

Northern Flame

Link to comment

Share on other sites

duclet

Link to comment

Share on other sites

Northern Flame

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information