[html / js] Snel posten SELECT-box met veel opties?

[Rekcor]

Hoi,

Op mijn website heb ik SELECT-boxes met veel (>1500) opties. Deze moeten allemaal gepost worden naar een PHP-script.

Probleem: om de waarden uit een SELECT-box te posten, moeten deze geselecteerd worden. In IE is dit zeeer traag (>7 seconden, je ziet gewoon iedere element geselecteerd worden).

Vraag: hebben jullie ideeen over hoe ik dit sneller kan maken? Alle opties in INPUT (hidden)-velden zetten maakt de zaak er niet sneller op. Ik gebruik onderstaande functie om alle opties te selecteren:

JavaScript:

/**
 * function selectAllSelectboxOptions(oSelect)
 * 
 * + selects all options in a select box  
 **/  
function selectAllSelectboxOptions(oSelect)
{
  var aoOptions = oSelect.options;
    
  for(var i=0; i<aoOptions.length ; i++)
  {    
    aoOptions[i].selected = true;
  }
}

[crisp]

eea is denk ik inherent aan het feit dat een select in IE6 niet native is en alles dus via een interface moet lopen. Wellicht dat dit wel sneller is:

JavaScript:

function selectAllSelectboxOptions(oSelect)
{
  oSelect.style.display = 'none';
  var aoOptions = oSelect.options, i = aoOptions.length;

  while (i--)    
  {    
    aoOptions[i].selected = true;
  }

  oSelect.style.display = '';
}

[Rekcor]

JavaScript:

  oSelect.style.display = 'none';

Hehe, dit had ik ook al geprobeerd. Het gekke was toen dat hij eerst de items ging verplaatsen en vervolgens pas de select onzichtbaar maakte (alhoewel dat in de code dus voor het verplaats-gedeelte stond).

Bedankt!

[ Voor 14% gewijzigd door Rekcor op 14-11-2006 12:24 ]

[Yoozer]

Rekcor schreef op dinsdag 14 november 2006 @ 08:06:
Op mijn website heb ik SELECT-boxes met veel (>1500) opties. Deze moeten allemaal gepost worden naar een PHP-script.

Ik weet dat het geen oplossing is, maar zou je dan niet beter kunnen gaan kijken naar of een tabel met paging kunt toepassen (of heel hip en modern ) een AJAX-autosuggest-optie? Je hebt dan wat meer code nodig om foute invoer te voorkomen, maar een wijziging in je interface kan soms een betere oplossing zijn. Met zo'n autosuggest zou je ook nog er voor kunnen zorgen dat de opties die er het meeste op lijken vervolgens in een dropdown gezet worden. Je dwingt de gebruiker nu zelf al een soort alfabetische zoektocht te doen uit zo'n grote lijst. Als het toch veel opties zijn kun je er gelijk beter een search van bouwen.

[BtM909]

Yoozer schreef op dinsdag 14 november 2006 @ 12:30:
[...]

Ik weet dat het geen oplossing is, maar zou je dan niet beter kunnen gaan kijken naar of een tabel met paging kunt toepassen (of heel hip en modern ) een AJAX-autosuggest-optie? Je hebt dan wat meer code nodig om foute invoer te voorkomen, maar een wijziging in je interface kan soms een betere oplossing zijn. Met zo'n autosuggest zou je ook nog er voor kunnen zorgen dat de opties die er het meeste op lijken vervolgens in een dropdown gezet worden. Je dwingt de gebruiker nu zelf al een soort alfabetische zoektocht te doen uit zo'n grote lijst. Als het toch veel opties zijn kun je er gelijk beter een search van bouwen.

Uh, wat heeft dat met het probleem van TS te maken?

---

Punt is, dat de browser de redraw niet uitvoert als je die display toggelt... Enige waarmee ik een redraw kan forceren is een alert ertussen

[Rekcor]

Even voor de duidelijkheid: op mijn pagina staan twee SELECT-boxes, waarvan de gebruiker de items van de linker naar de rechter kan verplaatsen. De rechter SELECT-box wordt vervolgens gepost.

Mmmz, ik zou natuurlijk een 'schaduw'-array bij kunnen houden met alle waarden in de rechter SELECT. In plaats van de items in de SELECT te selecteren, post ik die js-array...

Vanavond maar es proberen. Lijkt jullie het een goed idee?

[Yoozer]

Je kunt het probleem ook proberen te benaderen als een webshop (en dan maak je dus een sorteerbare tabel ondersteund door search) - voordeel is dan dat als het om bepaalde items gaat je ze dan gelijk kan sorteren op basis van andere kenmerken dan alleen de naam .

Vink je item aan of klik erop: dat zorgt er voor dat je het in je "winkelmandje" zet (je kunt hiervoor een sessievariabele gebruiken), en als je klaar bent met selecteren, op naar de volgende stap .

[ Voor 12% gewijzigd door Yoozer op 14-11-2006 17:15 ]

[crisp]

Het selecteren van 1500 options in een select duurt bij mij op mijn AMD XP2000 slechts 250 ms in IE6; het klopt dat je ze geselecteerd ziet worden maar tergend traag kan ik het niet noemen (verder wel een kaal document, dus dat kan misschien nog iets uitmaken).

Wat in ieder geval sneller is is om de waarden in een hidden field te stoppen, bijvoorbeeld komma-seperated:

JavaScript:

function stopAlleOptionsInEenHiddenField(oSelect)
{
    var aoOptions = oSelect.options, temp = [];

    for (var i = 0, l = aoOptions.length; i < l; i++)
    {
        temp[temp.length] = aoOptions[i].value;
    }

    select.form.elements['hiddenField'].value = temp.join(',');
}

Dat duurt bij mij 20 ms

Dit even afgezien dat ik bij een select met 1500 opties ook zou kijken naar andere alternatieven want geheel overzichtelijk lijkt me dat niet

[ Voor 9% gewijzigd door crisp op 14-11-2006 22:05 ]

[Rekcor]

Het selecteren van 1500 options in een select duurt bij mij op mijn AMD XP2000 slechts 250 ms in IE6

Dit mag opmerkelijk genoemd worden. Je gebruikt mijn functie?

[crisp]

Rekcor schreef op dinsdag 14 november 2006 @ 22:26:
[...]


Dit mag opmerkelijk genoemd worden. Je gebruikt mijn functie?

jep

[Rekcor]

crisp schreef op dinsdag 14 november 2006 @ 22:56:
[...]

jep

Oke, ik heb een PIV 2,6Ghz. Een groot verschil is wellicht dat de pagina waar mijn lijstjes op staan niet moeders kleinste zijn.

[crisp]

Rekcor schreef op woensdag 15 november 2006 @ 09:36:
[...]


Oke, ik heb een PIV 2,6Ghz. Een groot verschil is wellicht dat de pagina waar mijn lijstjes op staan niet moeders kleinste zijn.

Dat zou de snelheid van de 'redraw' inderdaad wel kunnen beinvloeden. Daarom is misschien de optie om de geselecteerde opties weg te schrijven naar een ander hidden field nog wel de beste