Avatar billede micker Praktikant
05. juni 2008 - 13:34 Der er 6 kommentarer

Select mutiple - Flyt af data

Hejsa

Jeg skal lave noget script, der kan flytte alt hvad der er markeret i en "select mutiple" over i en anden "select mutiple". Scriptet skal desuden kunne sortere de elementer fra, der allerede eksisterer i den select der flyttes til.

Til sidst vil jeg høre, om det er muligt at flytte alt hvad der står i en select over i en lang streng separeret med #? Det er hvad enten det er markeret eller ej.

Jeg er ret newbie indenfor javascript, så det ville være rart med noget hjælp, og gerne nogle kommentarer til, hvad det er der sker i koden.
Avatar billede w13 Novice
07. juni 2008 - 18:58 #1
Jeg kan hjælpe med returnering af en streng med alle options adskilt af "#":

<html>
<head>
<body>

<select id="test">
    <option value="Hello">Hello</option>
    <option value="World">World</option>
    <option value="End">End</option>
</select>

<script type="text/javascript">
function getOptions(o){
    var s="";
    for(var i=0,im=o.getElementsByTagName("option");i<im.length;i++){
        if(s!="")s+="#";
        s+=im[i].value;
    }
    return s
}
alert(getOptions(document.getElementById("test")))
</script>
Avatar billede micker Praktikant
07. juni 2008 - 20:18 #2
Det er ok, jeg har selv fundet ud af resten. Smider du lige et svar, så skal du få point.
Avatar billede olebole Juniormester
07. juni 2008 - 20:54 #3
<ole>

- og det kunne løses sådan:

<script type="text/javascript">
function sortSelect(oSel) {
    var aOpts = oSel.getElementsByTagName("option");
    var aTest = [];
    for (var i=aOpts.length-1; i>=0; i--) {
        aTest[i] = [aOpts[i].firstChild.nodeValue, aOpts[i]];
    }
    aTest.sort(doSort);
    for (var i=0,j=aTest.length; i<j; i++) oSel.appendChild(aTest[i][1]);
    oSel.selectedIndex = -1;
    aTest = null;
    function doSort(a, b) {
        return a[0]>b[0] ? 1 : a[0]<b[0] ? -1 : 0;
    }
}
function foo() {
    var oFrom = document.getElementById("sel_a");
    var oTo = document.getElementById("sel_b");
    var aFromOpts = oFrom.getElementsByTagName("option");
    for (var i=aFromOpts.length-1; i>=0; i--) {
        if (aFromOpts[i].selected) oTo.appendChild(aFromOpts[i]);
    }
    sortSelect(oTo);
}
</script>

<select id="sel_a" style="width:180px;height:100px;float:left" multiple="multiple">
    <option value="aa">Option AA</option>
    <option value="ab">Option AB</option>
    <option value="ac">Option AC</option>
    <option value="ad">Option AD</option>
</select>

<button onclick="foo()" style="width:40px;margin:30px 10px;float:left">&gt;&gt;</button>

<select id="sel_b" style="width:180px;height:100px;float:left" multiple="multiple">
    <option value="ba">Option BA</option>
    <option value="bb">Option BB</option>
    <option value="bc">Option BC</option>
    <option value="bd">Option BD</option>
</select>

/mvh
</bole>
Avatar billede olebole Juniormester
07. juni 2008 - 21:01 #4
- og disse linjer:
    for (var i=0,j=aTest.length; i<j; i++) oSel.appendChild(aTest[i][1]);
    oSel.selectedIndex = -1;

- kunne erstattes af:
    for (var i=0,j=aTest.length; i<j; i++) {
        aTest[i][1].attributes.removeNamedItem("selected");
        oSel.appendChild(aTest[i][1]);
    }

Sagen er, at den enkelte option tager sin selected status med sig, når den flyttes og derfor forbliver selected efter flytningen. To måder at gøre det samme på  =)
Avatar billede olebole Juniormester
07. juni 2008 - 21:05 #5
Eller det kunne flyttes til funktionen foo:
    for (var i=aFromOpts.length-1; i>=0; i--) {
        if (aFromOpts[i].selected) {
            aFromOpts[i].attributes.removeNamedItem("selected");
            oTo.appendChild(aFromOpts[i]);
        }
    }
Avatar billede olebole Juniormester
07. juni 2008 - 21:23 #6
Glem mine sidste to indlæg! Elementets attributter må naturligvis ikke afspejle brugerændringer af dynamiske properties  :)

Anyway, så en rettet, mere generisk version:

<script type="text/javascript">
function sortSelect(oSel) {
    var aOpts = oSel.getElementsByTagName("option");
    var aTest = [];
    for (var i=aOpts.length-1; i>=0; i--) {
        aTest[i] = [aOpts[i].firstChild.nodeValue, aOpts[i]];
    }
    aTest.sort(doSort);
    for (var i=0,j=aTest.length; i<j; i++) oSel.appendChild(aTest[i][1]);
    aTest = null;
    function doSort(a, b) {
        return a[0]>b[0] ? 1 : a[0]<b[0] ? -1 : 0;
    }
}
function moveOptions(sSelFrom, sSelTo) {
    var oFrom = document.getElementById(sSelFrom);
    var oTo = document.getElementById(sSelTo);
    var aFromOpts = oFrom.getElementsByTagName("option");
    for (var i=aFromOpts.length-1; i>=0; i--) {
        if (aFromOpts[i].selected) oTo.appendChild(aFromOpts[i]);
    }
    sortSelect(oTo);
    oTo.selectedIndex = -1;
}
</script>

<select id="sel_a" style="width:180px;height:100px;float:left" multiple="multiple">
    <option value="aa">Option AA</option>
    <option value="ab">Option AB</option>
    <option value="ac">Option AC</option>
    <option value="ad">Option AD</option>
</select>

<div style="width:40px;margin:20px 10px;float:left">
<button onclick="moveOptions('sel_a', 'sel_b')" style="width:40px;">&gt;&gt;</button>
<button onclick="moveOptions('sel_b', 'sel_a')" style="width:40px;">&lt;&lt;</button>
</div>

<select id="sel_b" style="width:180px;height:100px;float:left" multiple="multiple">
    <option value="ba">Option BA</option>
    <option value="bb">Option BB</option>
    <option value="bc">Option BC</option>
    <option value="bd">Option BD</option>
</select>
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester