webForumDet fria alternativet

Flytta runt värden i select (multiple)

7 svar · 847 visningar · startad av FlashX

FlashXMedlem sedan nov. 19991 033 inlägg
#1

Någon som känner till ett javascript där man kan flytta runt värden i en select-ruta. Se bilden.
Värden hämtas från en db och jag skulle vilja flytta runt dem i valfri ordning innan värdena skickas tillbaka.

move_selected.gif
CheguelinMedlem sedan juli 2003303 inlägg
#2

Har inte hört något om att det är möjligt i html, och det går knappast att göra med javascript. Det skulle vara om man simulerade en sån där lista (förbannat mycket jobb).

FlashXMedlem sedan nov. 19991 033 inlägg
#3

Det blir kanske lite omständigt att koda till en sådan variant.
Just nu används inget javascript utan varje steg upp eller ner skickas till servern som skickar tillbaka resultatet. Tanken var att lägga det på klienten istället så man kan flytta runt bäst man vill och skickar tillbaka det först när man är nöjd.
Jag får fundera ut något annat lämpligt alterntiv istället där man har möjlighet att ändra ordningen på samtliga värden.

CheguelinMedlem sedan juli 2003303 inlägg
#4

Detta förstår jag, men som sagt så går det inte. Lycka till med din alternativa lösning!

solbulleMedlem sedan mars 20015 287 inlägg
#5

Här kan ni kanske finna lite matnyttigt: http://www.webforum.nu/showthread.php?s=&forumid=24&threadid=18229&highlight=Moveup

FlashXMedlem sedan nov. 19991 033 inlägg
#6

Jag har tittat på några sådana varianter tidigare. Jag antar att det är något liknande denna
Fanns det någon funktion för att flytta ett värde uppåt eller neråt i listan i den tråden? Jag fick uppfattningen av det när jag läste tråden men hittade inget exempel.
Här är en variant där man kan lägga till och ta bort så det borde inte vara (tycker man) så svårt att flytta runt värdena men javascript är inte riktigt min dialekt.

CheguelinMedlem sedan juli 2003303 inlägg
#7

Oj oj oj :)

Jag såg inte alls din Up- respektive Down-knapp i exemplet. Såhär kan du göra:

<html>
 <head>
  <title>
   Sort
  </title>
  <script type="text/javascript">
	function moveDown(id) {
		var parent = document.getElementById(id);
		var element = parent.options[parent.selectedIndex];
		var next = parent.options[parent.selectedIndex + 1];
		
		if (next) parent.insertBefore(next, element);
		else return;
	}
	function moveUp(id) {
		var parent = document.getElementById(id);
		var element = parent.options[parent.selectedIndex];
		
		if (parent.selectedIndex - 1 >= 0) {
			var previous = parent.options[parent.selectedIndex - 1];
			
			parent.insertBefore(element, previous);
		} else return;
	}
  </script>
  <style type="text/css">
	button {
		font-family: Webdings;
	}
  </style>
 </head>
 <body>
  <p>
   <select id="box"
           size="5">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
   </select>
  </p>
  <p>
   <button onclick='moveUp("box");'>5</button>
   <button onclick='moveDown("box");'>6</button>
  </p>
 </body>
</html>
FlashXMedlem sedan nov. 19991 033 inlägg
#8

Många tack Cheguelin, det fungerar alldeles utmärkt för mitt ändamål :)

131 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
129 ms — hämta tråd, inlägg och bilagor (db)