[Javascript] Transfer de style mee in de options lijst

[Verwijderd]

Ik heb 2 <SELECT> boxen waarin ik <OPTION>'s met verschillende styles heb.
Nu probeer ik tussen die 2 selections de waarden te verzetten (dus een transfer van een OPTION van SELECT1 naar SELECT2).

Dit gaat allemaal perfect, enkel op de styles na. Ik geef een kleur mee aan de options:

code:

<option value="u<?=$SQL_O_GETUSERS->uid?>" style="color:green">
<?=$SQL_O_GETUSERS->username?>
</option>

Maar deze kleur wordt niet meegetransferred door mijn javascript:

code:

function copyToList(from,to)
{
  fromList = eval('document.forms[0].' + from);
  toList = eval('document.forms[0].' + to);
  if (toList.options.length > 0 && toList.options[0].value == 'temp')
  {
    toList.options.length = 0;
  }
  var sel = false;
  for (i=0;i<fromList.options.length;i++)
  {
    var current = fromList.options[i];
    if (current.selected)
    {
      sel = true;
      if (current.value == 'temp')
      {
        alert ('You cannot move this text!');
        return;
      }
      txt = current.text;
      val = current.value;
      looks = current.style;
      toList.options[toList.length] = new Option(txt,looks,val);
      fromList.options[i] = null;
      i--;
    }
  }
  if (!sel) alert ('You haven\'t selected any options!');
}

Ik heb al verschillende searches geprobeerd in google en nieuwsgroepen, maar ook daarmee kom ik er niet uit.

[ Voor 8% gewijzigd door Verwijderd op 11-04-2005 18:37 . Reden: Iets nettere code-formatting ]

[gsteen]

code:

toList.options[toList.length] = new Option(txt,looks,val);

Volgens mij gebruik je hier niet de juiste parameters voor maken van de nieuwe option.
'k Vond hier de beschrijving.

Je moet je style dus apart aan je option toekennen, dit kan niet via de 'constructor' van een option object. Je zou het zo kunnen doen:

code:

var newOption = new Option(txt,val);
newOption.style.color = looks.color;
toList.options[toList.length] = newOption;

[Verwijderd]

Dit moet het dus worden:

code:

toList.options[toList.length] = new Option(txt,val);
toList.options[toList.length-1].style.color = looks.color;
fromList.options[i] = null;

[ Voor 55% gewijzigd door Verwijderd op 12-04-2005 19:15 ]

[crisp]

Ik zeg altijd: waarom moeilijk doen als het makkelijk kan?

HTML:

<form action="#">
    <fieldset>
        <legend>copy the DOM way</legend>
        <select name="select1" multiple size=4 style="width:100px">
            <option value="1" style="color:green">optie 1</option>
            <option value="2" style="color:red">optie 2</option>
            <option value="3" style="color:yellow">optie 3</option>
            <option value="4" style="color:blue">optie 4</option>
        </select>
        <input type="button" value=">>" onclick="copyToList(this.form, 'select1', 'select2')">
        <input type="button" value="<<" onclick="copyToList(this.form, 'select2', 'select1')">
        <select name="select2" multiple size=4 style="width:100px">
        </select>
    </fieldset>
</form>

JavaScript:

function copyToList(form, from, to)
{
    var selectFrom = form.elements[from];
    var selectTo = form.elements[to];
    var i = selectFrom.options.length, option;

    while (i--)
    {
        if (selectFrom.options[i].selected)
        {
            option = selectFrom.removeChild(selectFrom.options[i]);
            option.selected = false;
            selectTo.appendChild(option);
        }
    }
}

En als je de optie niet wilt verwijderen uit je oorspronkelijke select kan je altijd nog cloneNode() gebruiken

[ Voor 10% gewijzigd door crisp op 12-04-2005 21:24 ]