22 svar · 664 visningar · startad av Macce
Har letat som en tok efter ett script som
visar två selectboxar. :x
Den ena med ett gäng alternativ, och när man klickar på dessa
ska dom hoppa över till den andra boxen.
Om jag sen ångrar ett val så ska jag kunna klicka i andra rutan så det hoppar tillbaks.
Annars kan man tänka sig att man har två knappar mellan boxarna med vänster- resp högerpil för attr flytta värdena.
Nån som vet var man kan hitta det...
Är det någonting sådant här du söker?
<head>
<script type="text/javascript">
<!--
function moveContent(s){
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var currentBox = (s=="box1") ? box1 : box2;
var theOtherBox = (s=="box1") ? box2 : box1;
var currentOption = null;
for(var i=0; i<currentBox.options.length; i++){
if(currentBox.options[i].selected){
currentOption = currentBox.options[i];
break;
}
}
if(currentOption){
currentBox.removeChild(currentOption);
theOtherBox.appendChild(currentOption);
} else
alert("Slut på alternativ!");
};
//-->
</script>
</head>
<body>
<form onsubmit="return false">
<table width="50%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<select id="box1">
<option value="1">Testvärde #1</option>
<option value="2">Testvärde #2</option>
<option value="3">Testvärde #3</option>
<option value="4">Testvärde #4</option>
</select>
</td>
<td align="center">
<button onclick="moveContent('box1')">--></button><br>
<button onclick="moveContent('box2')"><--</button>
</td>
<td align="right">
<select id="box2">
<option value="5">Testvärde #5</option>
<option value="6">Testvärde #6</option>
<option value="7">Testvärde #7</option>
<option value="8">Testvärde #8</option>
</select>
</td>
</tr>
</table>
</form>
</body>
:)
Nån som kan få till det så att man även kan dubbelklicka i boxarna så valet hoppar över till andra boxen ?
mvh
skulle varit enkelt lägga in ondblclick="moveContent('box1')"
i selecten men ondblclick fungerar ju tydligen inte i en select
Jag sitter med samma rpoblem här.
Jag undrar om man kan ändra så att de man väljer i den första boxen inte försvinner, de bara kopieras över till den andra boxen.
Eller om man kunde göra så att när man flyttar tillbaka den som man flyttade över så ska den komma på den plats som den låg på innan, dvs i bokstavsordning.
Kan man göra så att för varje tillbakaflytt så uppdaterar man boxen och sorterar i bokstavsordning?
Mvh
Beroende på vad du kommer att ha för text i dina "options", d.v.s. <option>text</option>, kan jag ge dig en lösning. Innehåller texten siffror blir det till att skriva en komplicerad sorteringsalgoritm eftersom sort()-funktionen som finns för Array inte kommer att sortera sådana texter optimalt, och en sådan algoritm har ( iallafall ) inte jag tid att skriva.
:)
Det ska bara bokstavs-sorteras :)
Ok, jag är lite upptagen just nu så jag återkommer ikväll ( om inte någon annan hinner före ;) ).
:)
Helt ok med mig :)
Är det någonting sådant här du är ute efter?
<script type="text/javascript">
<!--
function move(s){
if(document.forms["f"].elements[s].options.selectedIndex==-1)
return;
var
c=document.forms["f"].elements[s],
i=c.length;
while(i-->0){
if(c[i].selected){
add(c[i],(s=="s1"?"s2":"s1"));
break;
}
}
};
function add(o,f){
if(exists(o,f))
return;
var
e=document.forms["f"].elements[f],
i=e.length,
j=i+1,
k=0,
t=[o];
while(i-->0)
t.push(e[i]);
t.sort(function(a,b){
if(a.text<b.text)
return -1;
if(a.text>b.text)
return 1;
return 0;
});
e.options.length=0;
while(j-->0)
e.options[k]=new Option(t[k].text,t[k++].value);
};
function exists(e,s){
var
f=document.forms["f"].elements[s],
i=f.length;
while(i-->0){
if(e.text==f[i].text)
return true;
}
return false;
};
//-->
</script>
...
<div>
<form name="f" onsubmit="return false">
<div style="float:left">
<select size="8" name="s1">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
</select>
</div>
<div style="float:left;margin:35px 10px 0 10px">
<button onclick="move('s1')">--></button>
<br>
<button onclick="move('s2')"><--</button>
</div>
<div>
<select size="8" name="s2">
<option>G</option>
<option>H</option>
<option>I</option>
<option>J</option>
<option>K</option>
<option>L</option>
</select>
</div>
</form>
</div>
:)
Det fungerade bra.
Men det är så att jag vill att 's2' ska heta 's2[]' så att jag innehållet i den ska läggas i en Array.
Hur ska jag fixa det? Det ju inte att ändra till: ;)
<button onclick="move('s2[]')"><--</button>
Jag har dessutom 'multiple', hur fixar man så att den kan flytta över fler samtidigt?
Tak för hjälpen! :)
Jag lyckas flytta över fler samtidigt men jag kan inte flytta tillbaka de val som jag gjort.
Min s2 är tom från början:
<select name="s2"></select>
Det måste vara det som sabbar det, för jag får att return false i exists...
Tack, det funkade perfekt! :)
Nästan...
När jag markerar alla mina 256 poster i s1 och ska flytta över dem till s2 så hänger sig webläsaren i 20 sek innan alla poster är överflyttade, scrollen i s2 åker upp och ner som en jojjo som om den flyttar över allt många gånger.
Om man flyttar över bara några få samtidigt så är det inga problem...
Det är den "feature" som du bad om ;) För varje post som flyttas över sorteras den även i rätt ordning, därav "jojjon" ( den ena posten kanske skall sorteras sist medan en annan kanske skall ligga i mitten, t.ex. ). Tid tar det p.g.a. det stora antalet poster.
:)
Ok, det var ju inte bra alls... hmm
Då kanske man ska slippa sorteringen. Om det finns tusentals med poster så blir det ju inte alls bra... :)
Jag tycker det är snyggt ;)
Om du skall ha tusentals poster kanske besökaren(?) tror att webbsidan har hängt sig om ingenting händer ( om du inte sorterar d.v.s. ).
:)
Men eftersom den hänger sig för en stund redan vid 200 poster så är nog inte så bra.