Søg
Avatar billede cronaldo Nybegynder
30. december 2009 - 02:08 Der er 18 kommentarer og
1 løsning

Overføre options fra én select til en anden

Hej !

Jeg har fundet flg. kode via google. Problemet er, at jeg kan ikke få det til at virke efter hensigten. Og hvad er hensigten så? Jo, nu skal du høre:
Jeg har forskellige select's efter hvilken landsdel, der er blevet valgt. Det skal så være muligt at over når man trykker på en option i select'en skal den overføre til den anden select.

MIN KODE:
------------------
<script type="text/javascript">
<!--

var NS4 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) < 5);

function addOption(theSel, theText, theValue)
{
var newOpt = new Option(theText, theValue);
var selLength = theSel.length;
//theSel.options[selLength] = newOpt;

var dup = 0
for(i=0; i<selLength; i++)
{
//alert(newOpt.value+ ' ' +theSel.options[i].value)
if (newOpt.value==theSel.options[i].value){ dup =1; }
}
if (dup ==0)
{
theSel.options[selLength] = newOpt;
//theSel.options[selLength].selected = true;
}

//alert(theSel.options[selLength].value + ' ' + selLength);
}

function deleteOption(theSel, theIndex)
{
  var selLength = theSel.length;
  if(selLength>0)
  {
    theSel.options[theIndex] = null;
  }
}

function moveOptions(theSelFrom, theSelTo)
{
 
  var selLength = theSelFrom.length;
  var selectedText = new Array();
  var selectedValues = new Array();
  var selectedCount = 0;
 
  var i;
 
  // Find the selected Options in reverse order
  // and delete them from the 'from' Select.
  for(i=selLength-1; i>=0; i--)
  {
    if(theSelFrom.options[i].selected)
    {
      selectedText[selectedCount] = theSelFrom.options[i].text;
      selectedValues[selectedCount] = theSelFrom.options[i].value;
      deleteOption(theSelFrom, i);
      selectedCount++;
    }
  }
 
  // Add the selected text/values in reverse order.
  // This will add the Options to the 'to' Select
  // in the same order as they were in the 'from' Select.
  for(i=selectedCount-1; i>=0; i--)
  {
    addOption(theSelTo, selectedText[i], selectedValues[i]);
  }
 
  if(NS4) history.go(0);
}

//-->
</script>

<form action="" method="post">
<div id="MidtVestsjælland" style="display:none;">
<select name="MidtVestsjælland" disabled="disabled" size="8" onchange="moveOptions('MidtVestsjælland','postalcodes')">
    <option value="4000">4000 Roskilde</option>
    <option value="4030">4030 Tune</option>
    <option value="4040">4040 Jyllinge</option>
    <option value="4050">4050 Skibby</option>
    <option value="4060">4060 Kirke Såby</option>
    <option value="4070">4070 Kirke Hyllinge</option>
    <option value="4100">4100 Ringsted</option>
    <option value="4130">4130 Viby Sjælland</option>
    <option value="4140">4140 Borup</option>
    <option value="4160">4160 Herlufmagle</option>
    <option value="4171">4171 Glumsø</option>
    <option value="4173">4173 Fjenneslev</option>
    <option value="4174">4174 Jystrup Midtsjælland</option>
    <option value="4180">4180 Sorø</option>
    <option value="4190">4190 Munke Bjergby</option>
    <option value="4200">4200 Slagelse</option>
    <option value="4220">4220 Korsør</option>
    <option value="4230">4230 Skælskør</option>
    <option value="4241">4241 Vemmelev</option>
    <option value="4242">4242 Boeslunde</option>
    <option value="4243">4243 Rude</option>
    <option value="4250">4250 Fuglebjerg</option>
    <option value="4261">4261 Dalmose</option>
    <option value="4262">4262 Sandved</option>
    <option value="4270">4270 Høng</option>
    <option value="4281">4281 Gørlev</option>
    <option value="4291">4291 Ruds Vedby</option>
    <option value="4293">4293 Dianalund</option>
    <option value="4295">4295 Stenlille</option>
    <option value="4296">4296 Nyrup</option>
    <option value="4300">4300 Holbæk</option>
    <option value="4320">4320 Lejre</option>
    <option value="4330">4330 Hvalsø</option>
    <option value="4340">4340 Tølløse</option>
    <option value="4350">4350 Ugerløse</option>
    <option value="4360">4360 Kirke Eskilstrup</option>
    <option value="4370">4370 Store Merløse</option>
    <option value="4390">4390 Vipperød</option>
    <option value="4400">4400 Kalundborg</option>
    <option value="4420">4420 Regstrup</option>
    <option value="4440">4440 Mørkøv</option>
    <option value="4450">4450 Jyderup</option>
    <option value="4460">4460 Snertinge</option>
    <option value="4470">4470 Svebølle</option>
    <option value="4480">4480 Store Fuglede</option>
    <option value="4490">4490 Jerslev Sjælland</option>
    <option value="4500">4500 Nykøbing Sjælland</option>
    <option value="4520">4520 Svinninge</option>
    <option value="4532">4532 Gislinge</option>
    <option value="4534">4534 Hørve</option>
    <option value="4540">4540 Fårevejle</option>
    <option value="4550">4550 Asnæs</option>
    <option value="4560">4560 Vig</option>
    <option value="4571">4571 Grevinge</option>
    <option value="4572">4572 Nørre Asmindrup</option>
    <option value="4573">4573 Højby</option>
    <option value="4581">4581 Rørvig</option>
    <option value="4583">4583 Sjællands Odde</option>
    <option value="4591">4591 Føllenslev</option>
    <option value="4592">4592 Sejerø</option>
    <option value="4593">4593 Eskebjerg</option>
    <option value="4600">4600 Køge</option>
    <option value="4621">4621 Gadstrup</option>
    <option value="4622">4622 Havdrup</option>
    <option value="4623">4623 Lille Skensved</option>
    <option value="4632">4632 Bjæverskov</option>
    <option value="4640">4640 Faxe</option>
    <option value="4652">4652 Hårlev</option>
    <option value="4653">4653 Karise</option>
    <option value="4654">4654 Faxe Ladeplads</option>
    <option value="4660">4660 Store Heddinge</option>
    <option value="4671">4671 Strøby</option>
    <option value="4672">4672 Klippinge</option>
    <option value="4673">4673 Rødvig Stevns</option>
    <option value="4681">4681 Herfølge</option>
    <option value="4682">4682 Tureby</option>
    <option value="4683">4683 Rønnede</option>
    <option value="4684">4684 Holmegaard</option>
    <option value="4690">4690 Haslev</option>
    <option value="4700">4700 Næstved</option>
    <option value="4720">4720 Præstø</option>
    <option value="4733">4733 Tappernøje</option>
    <option value="4735">4735 Mern</option>
    <option value="4736">4736 Karrebæksminde</option>
    <option value="4750">4750 Lundby</option>
    <option value="4760">4760 Vordingborg</option>
    <option value="4771">4771 Kalvehave</option>
    <option value="4772">4772 Langebæk</option>
    <option value="4773">4773 Stensved</option>
</select>
    <a href="#" onclick="moveOptions('MidtVestsjælland', 'postalcodes')">Vælg alle</a>
</div>
</form>
<select name="postalcodes" size="8" style="width: 100px;">           
</select>
Avatar billede wanze Nybegynder
30. december 2009 - 02:20 #1
Endnu engang forstår jeg ikke helt, hvad du prøver på er jeg bange for. ;-)

Når jeg vælger fx 4100 Ringsted, hvad skal der så ske?
Avatar billede cronaldo Nybegynder
30. december 2009 - 02:27 #2
Har ved at retter fra 'MidtVestsjælland' til this fået den til at slette fra denne select.
Dog gider den stadig ikke overføre til postalcodes :S .. Nogen, der har en ide til hvorfor ?
Avatar billede wanze Nybegynder
30. december 2009 - 02:31 #3
Jeg er med på din idé nu, og jeg synes at du skal prøve at kigge på jQuery - det er et JavaScript framework, der kan en masse frække ting. :) Se fx http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html

Jeg bruger det selv tusinde steder på de sider, jeg arbejder med. Det er rigtig udbredt.

-
http://jquery.com/
Avatar billede wanze Nybegynder
30. december 2009 - 02:41 #4
Men den kode du linker viser jo ikke engang select-listen med postnumre og bynavne. Nu har du endnu engang formået at forvirre mig. Er pointen ikke, at når man vælger noget i den select-liste (som man ikke kan se!), så skal det komme frem i postalcodes?
Avatar billede wanze Nybegynder
30. december 2009 - 03:06 #5
Jeg har lavet et eksempel nu - håber det er det her du mente:
http://derfor.dk/tests/js/move-from-select-to-select.html
Avatar billede cronaldo Nybegynder
30. december 2009 - 10:31 #6
Er det muligt, at du gider hjælpe med lidt flere rettelser?
1. Et postnummer skal kunne smide tilbage i den select den kommer fra (options kan jo komme fra både a,c,d,e,f,g,h..... mens det KUN kan lægges over i 'b'
2. Et postnummer må under ingen omstændigheder kunne forekomme 2 gange :)
Avatar billede cronaldo Nybegynder
30. december 2009 - 18:29 #7
Ovenstående kommentar var til wanze's kode :)
Det er nøjagtigt som dit script. Det eneste er at man skal kunne føre postnumrene tilbage i den oprindelige select.

Jeg har 1 select til FØRST at vælge landsdel. Der vælger man mellem X landsdele.
Så når man har valgt midt- og vestsjælland så kommer ovenstående select til at få display:inline;
DEREFTER skal man kunne overføre fra midt- og vestsjælland til 'postalcodes'
Avatar billede wanze Nybegynder
30. december 2009 - 20:36 #8
Så man skal kunne flytte fra a til c, fra b til c, men ikke fra a til b?
Avatar billede cronaldo Nybegynder
30. december 2009 - 21:26 #9
Lige præcis :)
Det er for at man kan flytte postnumre fra alle områderne til en select.

altså skal der kunne flyttes fra:

østjylland -> postalcodes
midtjylland -> postalcodes

postalcodes -> østjylland
postalcodes -> midtjylland

Således er det krævet, at den på en måde gemmer hvilken select postnumrene kommer fra ! :)
Avatar billede wanze Nybegynder
30. december 2009 - 22:26 #10
http://derfor.dk/tests/js/move-from-select-to-select-2.html

Du kan bare fjerne <style>-afsnittet, det var kun for at blive overblik.
Avatar billede cronaldo Nybegynder
30. december 2009 - 23:48 #11
Du er jo genial.
Prøver lige at få det implementeret :)

I øvrigt må I alle have et supergodt nytår - håber vi ses igen i det kommende år :)
Avatar billede wanze Nybegynder
31. december 2009 - 00:00 #12
Jamen velbekomme og tak og i lige måde.
Avatar billede cronaldo Nybegynder
31. december 2009 - 00:05 #13
Okay, nu ved jeg godt, at jeg bliver MEGET krævende; men kan det laves sådan, at den sorterer efter
value'en på optionen?

sådan, at hvis flg. values er i en select:

1000
2000
3000

så bliver 2000 overflyttet og flyttet tilbage, så er rækkefølgen flg.:

1000
2000
3000

i stedet for

1000
3000
2000
Avatar billede cronaldo Nybegynder
31. december 2009 - 00:19 #14
og er det muligt at lave et link, hvor man kan trykke "overfør alle" ved begge bokse (altså ved hver landsdelsboks samt ved "postcodes", hvor den så fører det tilbage i de landsdelsbokse, som det kom fra? :)
Avatar billede cronaldo Nybegynder
31. december 2009 - 04:23 #15
Har nu ligget og prøvet at læse på de 2 problemstillinger, jeg nævnte ovenfor, og det med at den skal sætte ind det rigtige sted i en select havde jeg tænkt, at man kunne gøre således:

function move(option,from,to) {
    // smider to- og from-elemenerne i variabler, så de nemmere kan tilgås
    var f = document.getElementById(from);
    var t = document.getElementById(to)
    // opretter en ny option
    var opt = new Option(f.options[option].text,f.options[option].value);
    // tildeler objektet en klasse, sŒ vi ved, hvor den kommer fra
    opt.className     = from;
    opt.id            = option.id
    // tilføjer option til 'to'
   
    var fromvalue = f.options[option].value;
   
    for ( var i = 0; i <= t.length; i++ ){
        if(fromvalue = t.options[i].value){
            var place = i-1;
        }
    }
    t.options[place] = opt;   
    // fjerner option 'from'
    f.options[option] = null;
}

det virker dog ikke rigtigt... Kan du/I sige om jeg er helt galt i byen, og evt.  hvad jeg skal rette for at nå det rigtige resultat?
Avatar billede wanze Nybegynder
31. december 2009 - 07:14 #16
Jeg forstår ikke meget af den kode du lige har lavet. 

   for ( var i = 0; i <= t.length; i++ ){
        if(fromvalue = t.options[i].value){
            var place = i-1;
        }
    }

Her forsøger du at finde ud af, hvilken position den har i c-selecten, selvom du ikke har sat den ind endnu?

Derudover går jeg ud fra, at if(fromvalue = t.options[i].value){ skal være en sammenligning, isåfald skal du have 2 ='er. Et lighedstegn bruges til at tildele værdier.
Avatar billede cronaldo Nybegynder
31. december 2009 - 10:58 #17
Okay :) Jamen det, jeg vil, er, at jeg vil have, at den sorterer postnumrerne med mindste først hele tiden... også selvom man flytter et postnummer over i c og tilbage igen. Sådan at postnummeret efter at have været flyttet til c ikke ryger ned i bunden af selecten ?
Avatar billede cronaldo Nybegynder
03. januar 2009 - 11:08 #18
Okay, jeg fandt en metode. Det eneste jeg nu mangler er, at den skal kunne overføre alle postnumre - hvordan for() løkken se ud for at det kan lade sig gøre med din kode, wanze?
Avatar billede cronaldo Nybegynder
13. oktober 2010 - 14:29 #19
Jeg lukker - hvis du vil have point må du sende mig en besked ;)
Tak for hjælpen!!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Opgavestyring Af ingeman i JavaScript 1 15/09/202416:06 15/09/202420:40
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 20:18 Hvad tænker du om denne reklame. Af swambodk i Andet design
I går 18:46 Logge ind hos Amazon.de Af Malm i E-handel
I går 09:46 Messinger virker ikke på Windows 10 og Windows 11 Af eksmojo i Windows
11/0417:32 Jeg kan ikke opdatere min iPad til ios 26.4.1. Af Bettina i Apps til iOS
11/0408:32 Office pakke LTSC vs Retail? Af Don G i Office & Kontorpakker
White papers
Flere white papers »