---
title: "Flytta text från lista till lista"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/141137-flytta-text-från-lista-till-lista"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "learn"
published: "2006-01-19T12:48:25.000Z"
updated: "2006-01-19T21:51:19.000Z"
replies: 25
views: 676
page: 1
pages: 2
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/141137-flytta-text-från-lista-till-lista"
---

# Flytta text från lista till lista

_Sida 1 av 2._

## #1 — learn, 2006-01-19T12:48Z

Jag skulle vilja att [detta skript](http://www.jojoxx.net/jscript/archive/show.asp?id=25) fungerar så att när man endast behöver klicka på den text man vill flytta och slippa klicka på länken. Det funkar att ju i FF att göra så här:

```
<option value="1" onClick="selectMoveSelected(document.myForm.selectlist,document.myForm.selectlistb); return false;">Val 1</option>
```

Men detta funkar ju inte i IE... Någon som har ngt tips??

Tack på förhand!   :)

Permalänk: https://www.webforum.nu/p/141137

## #2 — Peter S, 2006-01-19T12:57Z

Jag hade förväntat mig att \<select onclick="selectMoveSelected(...)" skulle fungera utan problem, men efter att ha testat visade sig så inte vara fallet. Istället:

```
<select onclick="setTimeout(function(){selectMoveSelected(document.myForm.selectlist,document.myForm.selectlistb)},1)"
```

Hur gick det med trådarna längre ned i forumet?

Permalänk: https://www.webforum.nu/p/1751403

## #3 — learn, 2006-01-19T13:04Z

> **Peter S skrev:**
>
> Jag hade förväntat mig att \<select onclick="selectMoveSelected(...)" skulle fungera utan problem, men efter att ha testat visade sig så inte vara fallet. Istället:
>
>
> ```
> <select onclick="setTimeout(function(){selectMoveSelected(document.myForm.selectlist,document.myForm.selectlistb)},1)"
> ```

Funkar fortfarande inte i IE för mig... Dock i FF.

> **Peter S skrev:**
>
> Hur gick det med trådarna längre ned i forumet?

Vilka trådar syftar du på?

Permalänk: https://www.webforum.nu/p/1751412

## #4 — Peter S, 2006-01-19T13:09Z

Jag bifogar exemplet som för mig fungerar  :) 

Dessa trådar:
<http://www.webforum.nu/showthread.php?t=137692>
<http://www.webforum.nu/showthread.php?t=137694>

Bilagor:

- [learn.txt](https://www.webforum.nu/a/9316.txt)

Permalänk: https://www.webforum.nu/p/1751420

## #5 — learn, 2006-01-19T13:19Z

> **Peter S skrev:**
>
> Jag bifogar exemplet som för mig fungerar  :)

Funkar perfekt!  :bire 

> **Peter S skrev:**
>
> Dessa trådar:
> <http://www.webforum.nu/showthread.php?t=137692>
> <http://www.webforum.nu/showthread.php?t=137694>

Hade glömt bort dessa trådar, av ngn anledningen har dess bevakningar inte påminnt mig... Iaf, tack!  :bire 

Och en extra   :birp

Permalänk: https://www.webforum.nu/p/1751430

## #6 — learn, 2006-01-19T13:21Z

En liten tilläggsfråga bara, är det möjligt att få dem att lägga sig i ordning också??

Permalänk: https://www.webforum.nu/p/1751434

## #7 — Peter S, 2006-01-19T13:55Z

```
<form name="myForm">
<input type="checkbox" name="check">
<a href="#" onClick="checkboxToggle(document.myForm.check); return false;" style="text-decoration:none; color:black;">Klicka här för att växla</a><br>
<br>
<input type="radio" name="radio" value="1"> <input type="radio" name="radio" value="2"> <input type="radio" name="radio" value="3">
<a href="#" onClick="radioCycle(document.myForm.radio); return false;" style="text-decoration:none; color:black;">Klicka här för att växla</a><br>
<br>
<select onclick="setTimeout(function(){selectMoveSelected(document.myForm.selectlist,document.myForm.selectlistb)},1)" name="selectlist" size="4" multiple style="width:100px;">
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
<option value="4">Val 4</option>
</select>
<select name="selectlistb" size="4" multiple style="width:100px;">
</select><br>
<a href="#" onClick="selectCycle(document.myForm.selectlist); return false;" style="text-decoration:none; color:black;">Klicka här för att växla</a><br>
<a href="#" onClick="selectMarkall(document.myForm.selectlist); return false;" style="text-decoration:none; color:black;">Klicka här för att markera alla</a><br>
<a href="#" onClick="selectClearall(document.myForm.selectlist); return false;" style="text-decoration:none; color:black;">Klicka här för att avmarkera alla</a><br>
<a href="#" onClick="selectInvertall(document.myForm.selectlist); return false;" style="text-decoration:none; color:black;">Klicka här för att invertera alla</a><br>
<a href="#" onClick="selectMoveSelected(document.myForm.selectlist,document.myForm.selectlistb); return false;" style="text-decoration:none; color:black;">Klicka här för att flytta markerade från vänster till höger</a><br>
<br>
</form>

<script type="text/javascript">
/* Detta script finns att hämta på [url]http://www.jojoxx.net[/url] och
   får användas fritt så länge som dessa rader står kvar. */

function checkboxToggle(obj){
	obj.checked = (obj.checked) ? false:true;
}
function radioCycle(obj){
	nn=-1;
	for(n=0;n<obj.length;n++){if(obj[n].checked){nn=n}}
	nn++;
	if(nn==obj.length)nn=0;
	obj[nn].checked=true;
}
function selectCycle(obj){
	n=obj.selectedIndex; n++;
	if(n==obj.length)n=0;
	obj.selectedIndex=n;
}
function selectMarkall(obj){
	for(var n=0;n<obj.length;n++){ obj[n].selected=true; }
}
function selectClearall(obj){
	for(var n=0;n<obj.length;n++){ obj[n].selected=false; }
}
function selectInvertall(obj){
	for(var n=0;n<obj.length;n++){ obj[n].selected=(!obj[n].selected); }
}
function selectMoveSelected(from,to){
	var curr = 0;
	for(var n=0;n<from.length;n++){
		if(from[n].selected){ curr=new Option(from[n].text,from[n].value); }
	}
	for(var n=from.length-1;n>=0;n--){
		if(from[n].selected){ from[n]=null; }
	}

	var opts = to.options,
	    i    = 0,
	    elm  = 0,
	    arr  = [];
	while (elm = opts[i]){ arr[i++] = elm }

	arr.push(curr);

	arr.sort(function cmp(a,b){
		if (b.text < a.text){ return 1  }
		if (b.text > a.text){ return -1 }
		return 0;
	});

	i = elm = 0;
	while (elm = arr[i]){
		to.options[i++] = elm;
	}
}
</script>
```

Permalänk: https://www.webforum.nu/p/1751452

## #8 — learn, 2006-01-19T18:54Z

Hmm, nä det där funkade inte riktigt... Rätt va det är så hoppar det fram en massa extra text...Svårt att förklara, kanske du själv kan testa att klicka lite fram och tillbaka.

Permalänk: https://www.webforum.nu/p/1751558

## #9 — Peter S, 2006-01-19T19:05Z

Jag upplever inget hoppande. Använder du ovanstående kod precis som den är? Isåfall, hur skall jag klicka för att se det du beskriver?

 :)

Permalänk: https://www.webforum.nu/p/1751563

## #10 — learn, 2006-01-19T19:23Z

Ah, förlåt..glömde säga att jag gjort en liten justering på egen hand... :)  Jag vill att man ska kunna klicka tillbaka texten till ursprungsläget... 

Alltså, lägg till...

```
 onclick="setTimeout(function(){selectMoveSelected(document.myForm.selectlist,document.myForm.selectlistb)},1)" name="selectlist" size="4" multiple style="width:100px;"
```

...i den andra selecten också. När man sedan klickar fram och tillbaka så blir det strul...

Permalänk: https://www.webforum.nu/p/1751573

## #11 — Peter S, 2006-01-19T19:40Z

Du får byta plats på argumenten:

```
onclick="setTimeout(function(){selectMoveSelected(document.myForm.selectlistb,document.myForm.selectlist)},1)"
```

 :)

Permalänk: https://www.webforum.nu/p/1751588

## #12 — learn, 2006-01-19T19:43Z

Jojo :) det har jag gjort. Ändå beter den sig olovligt...

Permalänk: https://www.webforum.nu/p/1751591

## #13 — Peter S, 2006-01-19T19:46Z

Men i ditt förra inlägg är de inte bytta  ;) 

Komplett kod som fungerar för mig:

```
<form name="myForm">
<select size="7" onclick="setTimeout(function(){selectMoveSelected(document.myForm.selectlist,document.myForm.selectlistb)},1)" name="selectlist" size="4" multiple style="width:100px;">
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
<option value="4">Val 4</option>
<option value="5">Val 5</option>
<option value="6">Val 6</option>
<option value="7">Val 7</option>
</select>
<select size="7" onclick="setTimeout(function(){selectMoveSelected(document.myForm.selectlistb,document.myForm.selectlist)},1)" name="selectlistb" size="4" multiple style="width:100px;">
</select>
</form>
<script>
function selectMoveSelected(from,to){
	var curr = 0;
	for(var n=0;n<from.length;n++){
		if(from[n].selected){ curr=new Option(from[n].text,from[n].value); }
	}
	for(var n=from.length-1;n>=0;n--){
		if(from[n].selected){ from[n]=null; }
	}

	var opts = to.options,
	    i    = 0,
	    elm  = 0,
	    arr  = [];
	while (elm = opts[i]){ arr[i++] = elm }

	arr.push(curr);

	arr.sort(function cmp(a,b){
		if (b.text < a.text){ return 1  }
		if (b.text > a.text){ return -1 }
		return 0;
	});

	i = elm = 0;
	while (elm = arr[i]){
		to.options[i++] = elm;
	}
}
</script>
```

Permalänk: https://www.webforum.nu/p/1751593

## #14 — learn, 2006-01-19T19:52Z

Är du säker? Testa att klicka över några texter från vänster till höger och sedan tillbaka ngr gånger.. 

Bifogar bild på hur det ser ut för mig efter en stunds klickande.

Bilagor:

- [fel.jpg](https://www.webforum.nu/a/9325.jpg)

Permalänk: https://www.webforum.nu/p/1751599

## #15 — Peter S, 2006-01-19T19:54Z

Hm, icke!  :e 

Du får nog beskriva klicksekvensen.

Permalänk: https://www.webforum.nu/p/1751601

## #16 — learn, 2006-01-19T20:01Z

Ok, då förklarar jag exakt hur jag klickar (notera att detta bara är ett exempel)

1) Uppdaterar sidan.
2) Klickar på "Val 1".
3) Klickar på "Val 5".
4) Klickar på "Val 7".
5) Klickar tillbaka dem i ordningen: "Val 7", "Val 1" och "Val 5".
6) Klickar på "Val 1".
7) Vips så ser det ut som på bifogad bild.

Bilagor:

- [fel2.jpg](https://www.webforum.nu/a/9327.jpg)

Permalänk: https://www.webforum.nu/p/1751611

## #17 — Peter S, 2006-01-19T20:04Z

Mystiskt. Hur det ser ut för mig kan ses i den bifogade filen.

Du använder alltså den senast postade koden (utan några ändringar)?

Bilagor:

- [tmp.jpg](https://www.webforum.nu/a/9328.jpg)

Permalänk: https://www.webforum.nu/p/1751616

## #18 — learn, 2006-01-19T20:06Z

Vänta nu, använder du IE? Själv kör jag med FF, upptäckte nämligen precis att det fungerar som det ska i IE... (Jag vill att detta ska funka oavsett läsare...)

Permalänk: https://www.webforum.nu/p/1751617

## #19 — Peter S, 2006-01-19T20:11Z

Ah, ok. Jag får samma fel som du i FF.

Återkommer strax...

Permalänk: https://www.webforum.nu/p/1751618

## #20 — Peter S, 2006-01-19T20:24Z

Nu så:

```
function selectMoveSelected(from,to){
  var tArr = [from.options[from.selectedIndex]],
      fArr = [];
  for (var i = 0; i < from.length; ++i){
    if (!from.options[i].selected){ fArr.push(from.options[i]); }
  }

  from.options.length = 0;

  updateSelect(from,fArr);

  for (var i = 0; i < to.length; ++i){
    tArr.push(to.options[i]);
  }

  to.options.length = 0;

  tArr.sort(function(a,b){
    if (b.text < a.text){ return 1 }
    if (b.text > a.text){ return -1 }
    return 0;
  });

  updateSelect(to,tArr);
}

function updateSelect(sel,arr){
  for (var i = 0; i < arr.length; ++i){
    sel.options[sel.options.length] = arr[i];
  }
}
```

Permalänk: https://www.webforum.nu/p/1751630

---

Tråden på webben: https://www.webforum.nu/amne/javascript/141137-flytta-text-från-lista-till-lista  
Nästa sida: https://www.webforum.nu/amne/javascript/141137-flytta-text-från-lista-till-lista/page2.md