2 selects met switch ertussen

Door - - op 21-10-2006 11:23

658 views

Ik wil graag een JavaScriptje waarmee je twee selectmenu's kunt koppelen. Dan zie je dus twee lijsten naast elkaar, met een knopje '<' en '>' ertussen, en dan kun je items uit de ene lijst in de andere lijst zetten.

En dan moet er natuurlijk ook nog ff wat bij om het te verwerken, want een select stuurt alleen het geselecteerde item mee, en ik wil alle items mee laten sturen.

- -

21-10-2006 13:23

Weet iemand dan wel toevallig hoe zoiets heet? Want het googlet zo lastig als je niet weet waarop je moet googelen ;)

(lalala, geen bump hoor!(A))

Jason de Ridder

21-10-2006 13:33


<html>
<head>
<script type="text/javascript">
function favBrowser()
{
var mylist=document.getElementById("myList")
document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].text
}
</script>
</head>

<body>
<form>
Select your favorite browser:
<select id="myList" onchange="favBrowser()">
  <option>Internet Explorer</option>
  <option>Netscape</option>
  <option>Opera</option>
</select>
<p>Your favorite browser is: <input type="text" id="favorite" size="20"></p>
</form>
</body>

</html>

Dit haal ik zo van W3 schools (know your sources)
Even wat kleine dingetje aanpassen (zoals the textfield) en dan voilá!

- -

21-10-2006 13:59

Ok, ff een beetje prutsen.

- -

21-10-2006 14:19

Het is gelukt. Voor de nieuwsgierigen onder ons:


<html>
	<head>
		<script type="text/javascript">
			function goleft()
				{
					var links = document.getElementById("left")
					var rechts = document.getElementById("right")
				 	if(rechts.selectedIndex != -1)
				 		{
							links.options[links.options.length] = rechts.options[rechts.selectedIndex]
						}
				}
			function goright()
				{
					var links = document.getElementById("left")
					var rechts = document.getElementById("right")
				 	if(links.selectedIndex != -1)
				 		{
							rechts.options[rechts.options.length] = links.options[links.selectedIndex]
						}
				}
		</script>
	</head>
	<body>
		<form>
			<div>
				<select id="left" size="5" style="width: 150;">
				</select>
				<select id="right" size="5" style="width: 150;">
				  <option value="1">Internet Explorer</option>
				  <option value="2">Netscape</option>
				  <option value="3">Opera</option>
				</select>
			</div>
			<p>
				<input type="button" value="&lt;" onclick="goleft()">
				<input type="button" value="&gt;" onclick="goright()">
			</p>
		</form>

	</body>
</html>

Jason de Ridder

21-10-2006 14:42

zie je zo lastig was ie niet he? ;)

- -

21-10-2006 15:30

Nee, viel uiteindelijk wel mee. Kom er net alleen achter dat het niet werkt in IE. Eén van de vele redenen om over te stappen op FF! :D

Reageren

Inloggen om te reageren