webForumDet fria alternativet
Logga in / Bli medlem

Flytta runt värden i select (multiple)

JavaScript

7 svar · 847 visningar · startad av FlashX

Medlem sedan nov. 19991 033 inlägg
Trådstart#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
Medlem 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).

Medlem 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.

Medlem 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!

Medlem 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

Medlem 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.

Medlem 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>
Medlem sedan nov. 19991 033 inlägg
#8

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

255 ms totalt · 4 externa anrop · v20260731065814-full.51f67c91
124 ms — deklarationer (db)
0 ms — hämta statistik (cache)
128 ms — hämta tråd, inlägg och bilagor (db)
122 ms — ändringar (db)