[JS] Item uit selectbox selecteren

[.Alex]

Bonjour,

Hoe kan ik een item uit een bepaalde selectbox selecteren d.m.v. javascript?

Stel:
Ik heb de volgende selectbox:
- item1
- item2
- item3

En dan wil ik graag dat "item2" of "item3" bij onload van de pagina geselecteerd wordt. Hoe doe ik dat?

(en ja, ik heb al gezocht.. kon het alleen niet vinden..)


Groet,

.Alex

[ Voor 10% gewijzigd door .Alex op 28-06-2006 17:28 ]

[TeeDee]

Wat heb je dan al geprobeerd?
Alleen zoeken (en niets kunnen vinden) is niet voldoende.

[.Alex]

TeeDee schreef op woensdag 28 juni 2006 @ 17:31:
Wat heb je dan al geprobeerd?
Alleen zoeken (en niets kunnen vinden) is niet voldoende.

Ik heb hier op het forum gezocht en gegoogled. Omdat de bewerking "select" is, en het object "select" heet wordt het zoeken er ook niet eenvoudiger op.

Ik heb het vermoeden dat het iets met de selectedIndex te maken heeft, maar kan de juiste code niet vinden..

[Borizz]

JavaScript:

var options = document.getElementById('selectId').options[];
for (var i=0; i < options.length; i++) {
  if (options[i].value == '3' || options[i].value == '2') {
    options[i].selected = true;
  } 
}

[Verwijderd]

Hoe weet je welke je moet selecteren.

Ik neem aan dat je ergens opslaat in een database wat de keuze moet zijn.
Dan kun je toch dynamisch dat laten genereren met php of iets dergelijks?

[Annie]

Als het "onload" moet plaatsvinden, waarom dan niet gewoon:

HTML:

...
<option selected="selected">nummer 2</option>
...

[.Alex]

Borizz schreef op woensdag 28 juni 2006 @ 18:20:

JavaScript:

var options = document.getElementById('selectId').options[];
for (var i=0; i < options.length; i++) {
  if (options[i].value == '3' || options[i].value == '2') {
    options[i].selected = true;
  } 
}

Hmm.. met die code kan ik 123 niet echt wat. Dit zou mede wel eens kunnen komen omdat ik een syntax error krijg. Reden hiervan kan natuurlijk zijn dat de code niet goed is, of ik het niet snap.

Verwijderd schreef op woensdag 28 juni 2006 @ 18:21:
Hoe weet je welke je moet selecteren.

Ik neem aan dat je ergens opslaat in een database wat de keuze moet zijn.
Dan kun je toch dynamisch dat laten genereren met php of iets dergelijks?

True, maar met javascript zou het handiger en sneller moeten kunnen. Ik probeer hier stiekem ook iets van te leren. Met php kan ik het prima oplossen, maar dat wil ik niet

Annie schreef op woensdag 28 juni 2006 @ 19:56:
Als het "onload" moet plaatsvinden, waarom dan niet gewoon:

HTML:

...
<option selected="selected">nummer 2</option>
...

Zie hierboven, het is dynamisch.

Iemand anders nog leuke suggesties?

[ Voor 5% gewijzigd door .Alex op 29-06-2006 01:14 ]

[Verwijderd]

Met de code van Boris moet je toch een heel eind komen...
Als je verder hulp wilt, zal je toch met wat eigen code in combi met de code van Boris moeten komen.
Meld erbij wat voor error je krijgt en misschien kunnen we je verder helpen

[Michali]

Borizz schreef op woensdag 28 juni 2006 @ 18:20:

JavaScript:

var options = document.getElementById('selectId').options[];
for (var i=0; i < options.length; i++) {
  if (options[i].value == '3' || options[i].value == '2') {
    options[i].selected = true;
  } 
}

Die [] achter options moet weg. Dan zou het wel moeten werken.

[.Alex]

Michali schreef op donderdag 29 juni 2006 @ 08:35:
[...]

Die [] achter options moet weg. Dan zou het wel moeten werken.

Potverdrie! Ik kon de fout maar niet vinden, maar het zat gewoon in die blokhaken.

Om de oplossing (voor mij) volledig te maken: (leuk voor de archieven)

code:

function selectboxdoen(waarde){
    var options = document.getElementById('naamvandeselectbox').options; 
    for (var i=0; i < options.length; i++) { 
      if (options[i].value == waarde) { 
        options[i].selected = true; 
      }  
    }
}

Iedereen bedankt!

[ Voor 4% gewijzigd door .Alex op 29-06-2006 12:51 ]

[crisp]

Ik zou ook een break doen als je de waarde gevonden hebt, en ipv de optie op selected zetten de selectedIndex van de select gebruiken:

JavaScript:

function selectboxdoen(id,waarde)
{
    var select = document.getElementById(id), options = select.options, i = options.length;
    while (i--)
    {
        if (options[i].value == waarde)
        {
            select.selectedIndex = i;
            break;
        }
    }
}

[.Alex]

crisp schreef op donderdag 29 juni 2006 @ 12:55:
Ik zou ook een break doen als je de waarde gevonden hebt, en ipv de optie op selected zetten de selectedIndex van de select gebruiken:

Even voor het leerproces: Waarom?

[crisp]

.Alex schreef op donderdag 29 juni 2006 @ 13:12:
[...]

Even voor het leerproces: Waarom?

Het eerste omdat als je de waarde gevonden hebt het onzinnig is om de rest van de waardes nog te checken, en het tweede omdat gebruik van selectedIndex betere support geniet in oudere browsers

[Sybr_E-N]

.Alex schreef op donderdag 29 juni 2006 @ 13:12:
[...]

Even voor het leerproces: Waarom?

Waarom zou je daargaan met zoeken als je de waarden al gevonden hebt?

[ Voor 53% gewijzigd door Sybr_E-N op 29-06-2006 13:14 ]

[.Alex]

crisp schreef op donderdag 29 juni 2006 @ 13:13:
[...]

Het eerste omdat als je de waarde gevonden hebt het onzinnig is om de rest van de waardes nog te checken, en het tweede omdat gebruik van selectedIndex betere support geniet in oudere browsers

Okay, gaaf!
En als ik goed heb begint ie nu onderaan ipv bovenaan de seletbox te controleren toch?

Ik wordt steeds meer overdonderd door handige mogelijkheden van Javascript

[Tsjilp]

.Alex schreef op donderdag 29 juni 2006 @ 13:31:
[...]

Okay, gaaf!
En als ik goed heb begint ie nu onderaan ipv bovenaan de seletbox te controleren toch?

Ik wordt steeds meer overdonderd door handige mogelijkheden van Javascript

Ja hij begint onderaan, JS kan (evenals actionscript) sneller aftrekken dan optellen.
Wil je toch dat hij optelt dat is de snelste manier i-(-1) (tenminste in AS, neem aan dat dat ook voor JS geldt)

[crisp]

Tsjilp schreef op donderdag 29 juni 2006 @ 14:17:
[...]


Ja hij begint onderaan, JS kan (evenals actionscript) sneller aftrekken dan optellen.
Wil je toch dat hij optelt dat is de snelste manier i-(-1) (tenminste in AS, neem aan dat dat ook voor JS geldt)

Dit is nog sneller (en voorwaards):

JavaScript:

var i = 0, option;
while ((option = options[i++]))
{
  // do iets met option
}

fact is dat ik gewoon een voorkeur heb voor while() tov for(;;)

Het is overigens niet het optellen/aftrekken dat het verschilt maakt, maar de evaluatie naar true/sfalse is sneller dan een vergelijking met een integer

[ Voor 15% gewijzigd door crisp op 29-06-2006 14:21 ]