Overfør fra select multiple 1 til select multiple 2 ved load

F.eks.

<form action="http://www.et-domæne.dk/" method="post">
<h5>Ret produkt</h5>
<p>Farver (Til venstre er tilg&aelig;ngelige farver):<br>
<select multiple name="transfer_to_colours_id" size="5" style="width: 150px;">
<option value="1">Brun</option>
<option value="2">Grøn</option>
<option value="3">Hvid</option>
<option value="4">Rød</option>
<option value="5">Sort</option>
<option value="6">Sort / Hvid</option>
</select>
<input type="button" name="remove" value="&laquo;" onclick="trfColor('remove')">
<input type="button" name="transfer" value="&raquo;" onclick="trfColor('insert')">
<select multiple name="colours_id[]" size="5" style="width: 150px;">
</select>
</p>
<p><input type="submit" name="submit" value="Udf&oslash;r">
<input type="reset" name="reset" value="Nulstil"></p>
</form>
<script type="text/javascript">
var from = to = null;
function trfColor(act,opts){
  if(act == "remove"){
    var remOpt = to.options[to.selectedIndex];
    from.options[from.length] = new Option(remOpt.text, remOpt.value);
    to.options[to.selectedIndex] = null;
  }else if(!opts){
    var insOpt = from.options[from.selectedIndex];
    to.options[to.length] = new Option(insOpt.text, insOpt.value);
    from.options[from.selectedIndex] = null;
    for(i=0,im=to.length;im>i;i++){
      to.options[i].selected = true;
    }
  }else{
    if(typeof opts == "object"){
      for(i=0,im=opts.length;im>i;i++){
        var insOpt = getOption(from,opts[i]);
        alert(insOpt.text);
        to.options[to.length] = new Option(insOpt.text, insOpt.value);
        remOption(from, opts[i]);
      }
    }else{
      var insOpt = getOption(from,opts);
      to.options[to.length] = new Option(insOpt.text, insOpt.value);
      remOption(from,opts);
    }
    for(i=0,im=to.length;im>i;i++){
      to.options[i].selected = true;
    }
  }
}
function getOption(sel, val){
  for(j=0,jm=sel.length;jm>j;j++)
    if(sel.options[j].value == val)
      return sel.options[j];
  return null;
}
function remOption(sel, val){
  for(j=0,jm=sel.length;jm>j;j++){
    if(sel.options[j].value == val){
      sel.options[j] = null;
      return;
    }
  }
}
window.onload = function(){
  var f = document.forms[0];
  from = f.transfer_to_colours_id;
  to = f.elements["colours_id[]"];
  //trfColor("insert", [3,1,4]);
  trfColor("insert",4);
  trfColor("insert",2);
}
</script>

-- jeg har givet to forskellige muligheder for at angive options, du vil have overført, så du kan vælge den, der passer bedst ind i dit php-script ...

Kan man ikke gøre sådan at det afvikles på selve siden i stedet for at jeg skal i head eller en script-fil?

F. eks. indsætte noget i stil med nedenstående under select multiple boksene:

<script type="text/javascript">
window.onload = function()
{
this.form.elements['colours_id[]'].options[this.form.elements['colours_id[]'].length] = new Option(this.form.transfer_to_colours_id.[1].options[this.form.transfer_to_colours_id.[1].selectedIndex].text, this.form.transfer_to_colours_id.[1].options[this.form.transfer_to_colours_id.[1].selectedIndex].value); this.form.transfer_to_colours_id.[1].options[this.form.transfer_to_colours_id.[1].selectedIndex] = null; for(i = 0; i < this.form.elements['colours_id[]'].options.length; i++) this.form.elements['colours_id[]'].options[i].selected = true;
this.form.elements['colours_id[]'].options[this.form.elements['colours_id[]'].length] = new Option(this.form.transfer_to_colours_id.[2].options[this.form.transfer_to_colours_id.[2].selectedIndex].text, this.form.transfer_to_colours_id.[2].options[this.form.transfer_to_colours_id.[2].selectedIndex].value); this.form.transfer_to_colours_id.[2].options[this.form.transfer_to_colours_id.[2].selectedIndex] = null; for(i = 0; i < this.form.elements['colours_id[]'].options.length; i++) this.form.elements['colours_id[]'].options[i].selected = true;
}
</script>

transfer_to_colours_id.[1] og transfer_to_colours_id.[2] er i mangel af bedre. :)

Nej, for du har brug for en ting onload, hvis du ikke selv indstiller dine selects til at indeholde det rigtige ...

-- og der er ikke nogen, der forbyder, at et script står inde i html-koden, jeg plejer bare at anbefale, at man sætter den slags i head-sektionen, for så kan man nemt genskabe overblikket ved at flytte det ud i en fil !-)

-- altså kan du bare placere det som du vil ...

-- en anden ting er brugen af variable, hvor jeg klart vil anbefale den tilgangsvinkel, jeg har vist, da overskueligheden vokser voldsomt (og scriptets længde mindskes !-)

-- men det kan da forkortes (men gør det først, når du er 350% sikker på, at det virker upåklageligt:

<script type="text/javascript">
var from = to = null;function trfColor(act,opts){if(act == "remove"){var remOpt = to.options[to.selectedIndex];from.options[from.length] = new Option(remOpt.text, remOpt.value);to.options[to.selectedIndex] = null;}else if(!opts){var insOpt = from.options[from.selectedIndex];to.options[to.length] = new Option(insOpt.text, insOpt.value);from.options[from.selectedIndex] = null;for(i=0,im=to.length;im>i;i++){to.options[i].selected = true;}}else{if(typeof opts == "object"){for(i=0,im=opts.length;im>i;i++){var insOpt = getOption(from,opts[i]);to.options[to.length] = new Option(insOpt.text, insOpt.value);remOption(from, opts[i]);}}else{var insOpt = getOption(from,opts);to.options[to.length] = new Option(insOpt.text, insOpt.value);remOption(from,opts);}for(i=0,im=to.length;im>i;i++){to.options[i].selected = true;}}}
function getOption(sel, val){for(j=0,jm=sel.length;jm>j;j++)if(sel.options[j].value == val)return sel.options[j];return null;}
function remOption(sel, val){for(j=0,jm=sel.length;jm>j;j++){if(sel.options[j].value == val){sel.options[j] = null;return;}}}
window.onload = function(){var f = document.forms[0];from = f.transfer_to_colours_id;to = f.elements["colours_id[]"];/*trfColor("insert", [3,1,4]);*/trfColor("insert",4);trfColor("insert",2);}
</script>

Det virker perfekt.

Men lige et spørgsmål til. :)

Jeg har endnu 2 select multiple i samme form. Kan jeg have dette i en .js fil:

var from = to = null;

function trfColor(act,opts)
{
    if(act == "remove")
    {
        var remOpt = to.options[to.selectedIndex];
        from.options[from.length] = new Option(remOpt.text, remOpt.value);
        to.options[to.selectedIndex] = null;
    }
    else if(!opts)
    {
        var insOpt = from.options[from.selectedIndex];
        to.options[to.length] = new Option(insOpt.text, insOpt.value);
        from.options[from.selectedIndex] = null;

        for(i = 0, im = to.length; im > i; i++)
        {
            to.options[i].selected = true;
        }
    }
    else
    {
        if(typeof opts == "object")
        {
            for(i = 0, im = opts.length; im > i; i++)
            {
                var insOpt = getOption(from,opts[i]);
                to.options[to.length] = new Option(insOpt.text, insOpt.value);
                remOption(from, opts[i]);
            }
        }
        else
        {
            var insOpt = getOption(from,opts);
            to.options[to.length] = new Option(insOpt.text, insOpt.value);
            remOption(from,opts);
        }
        for(i = 0, im = to.length; im > i; i++)
        {
            to.options[i].selected = true;
        }
    }
}

function getOption(sel, val)
{
    for(j = 0, jm = sel.length; jm > j; j++)
    if(sel.options[j].value == val)
    return sel.options[j];
    return null;
}

function remOption(sel, val)
{
    for(j = 0, jm = sel.length; jm > j; j++)
    {
        if(sel.options[j].value == val)
        {
            sel.options[j] = null;
            return;
        }
    }
}

Og så dette ved hver af de 2 sæt select multiple:

window.onload = function()
{
    var f = document.forms[0];
    from = f.transfer_to_colours_id;
    to = f.elements['colours_id[]'];
    trfColor('insert', 1);
    trfColor('insert', 2);
}

window.onload = function()
{
    var f = document.forms[0];
    from = f.transfer_to_sizes_id;
    to = f.elements['sizes_id[]'];
    trfColor('insert', 1);
    trfColor('insert', 2);
}

Det kunne jeg. :)

Tak for hjælpen. Ligger du et svar?

Argh. Jeg havde selvfølgelig kun tjekket at det virkede hvis jeg fjernede en option. Men den melder fejl, når man indsætter:

Object doesn't support this property or method. Line 14 Character 3.

Linie 14 er denne:

        to.options[to.length] = new Option(insOpt.text, insOpt.value);

Nå, jeg prøver at starte forfra.

Jeg har fra html.dk taget dette script:

function deleteOption(object,index) {
    object.options[index] = null;
}

function addOption(object,text,value) {
    var defaultSelected = true;
    var selected = true;
    var optionName = new Option(text, value, defaultSelected, selected)
    object.options[object.length] = optionName;
}

function moveSelected(fromObject,toObject) {
    for (var i=0, l=fromObject.options.length;i<l;i++) {
        if (fromObject.options[i].selected)
            addOption(toObject,fromObject.options[i].text,fromObject.options[i].value);
    }
    for (var i=fromObject.options.length-1;i>-1;i--) {
        if (fromObject.options[i].selected)
            deleteOption(fromObject,i);
    }
}

function SelectAll(fromObject) {
    for (var i=0, l=fromObject.options.length;i<l;i++) {
        fromObject.options[i].text,fromObject.options[i].selected = true;
    }
}

Hvordan får jeg så roenvings window.onload funktion ind i html.dk's script? :)

Nå, jeg fik fundet ud af lidt, men det er helt forkert. Den overfører Grøn (2) og Hvid (3) fra farver og Medium (2) og Small (3) fra størrelser. I databasen er for begge felter valgt 1 og 2.

<p>Farver (Til venstre er tilg&aelig;ngelige farver):<br>
<select multiple name="transfer_to_colours_id" size="5" style="width: 150px;">
<option value="1">Brun</option>
<option value="2">Grøn</option>
<option value="3">Hvid</option>
<option value="4">Rød</option>
<option value="5">Sort</option>
<option value="6">Sort / Hvid</option>
</select>
<input type="button" name="remove" value="&laquo;" onclick="moveSelected(this.form.elements['colours_id[]'], this.form.transfer_to_colours_id);">
<input type="button" name="transfer" value="&raquo;" onclick="moveSelected(this.form.transfer_to_colours_id, this.form.elements['colours_id[]']);">
<select multiple name="colours_id[]" size="5" style="width: 150px;">
</select>
<script type="text/javascript">
var f = document.forms[0];
fromObject = f.transfer_to_colours_id;
toObject = f.elements['colours_id[]'];
addOption(toObject, fromObject.options[1].text, fromObject.options[1].value);
addOption(toObject, fromObject.options[2].text, fromObject.options[2].value);
</script></p>
<p>St&oslash;rrelser (Til venstre er tilg&aelig;ngelige st&oslash;rrelser):<br>
<select multiple name="transfer_to_sizes_id" size="5" style="width: 150px;">
<option value="1">Large</option>
<option value="2">Medium</option>
<option value="3">Small</option>
</select>
<input type="button" name="remove" value="&laquo;" onclick="moveSelected(this.form.elements['sizes_id[]'], this.form.transfer_to_sizes_id);">
<input type="button" name="transfer" value="&raquo;" onclick="moveSelected(this.form.transfer_to_sizes_id, this.form.elements['sizes_id[]']);">
<select multiple name="sizes_id[]" size="5" style="width: 150px;">
</select><script type="text/javascript">
var f = document.forms[0];
fromObject = f.transfer_to_sizes_id;
toObject = f.elements['sizes_id[]'];
addOption(toObject, fromObject.options[1].text, fromObject.options[1].value);
addOption(toObject, fromObject.options[2].text, fromObject.options[2].value);
</script></p>

Da jeg læste mit indlæg 23/02-2007 18:44:47, tænkte jeg at der bare skulle trækkes en fra database udtrækket. Og det ser ud til at virke.

Roenving>>Points?

Det er fordi options (ligesom alle andre arrays mv. !-) er nul-baserede i javascript, dvs. den første har nummer 0 osv. ...

Velbekomme '-)

-- og tak for point ;~}