[JS] <select> => option kiezen - Softwareontwikkeling

dinsdag 23 augustus 2005 17:19

Acties:

Topicstarter

Hey,

Ik heb een webformulier met o.a. een select, die er zo uitziet:

code:

<select size="1" name="Keuzes">
    <option>Keuze1</option>
    <option>Keuze2</option>
    <option>Keuze3</option>
    </select>

Bij het laden van de pagina moet één van de drie opties geselecteerd zijn. Welke optie hangt af van een javascript-variabele die extern wordt geladen. Ik bedoel dus zoiets:

code:

1	<script language="javascript" src="java/variabelen.js" type="text/javascript"></script>

In dit bestand (dat wordt gegenereerd) staat vb.

code:

1	var keuze = "keuze2";

En die "keuze2" kan ook keuze1 of keuze3 worden.

Mijn vraag dus: hoe selecteer ik een bepaalde option bij het laden van de pagina a.d.h.v. een externe javascript variabele?

dinsdag 23 augustus 2005 17:27

Acties:

Johnny

ondergewaardeerde internetguru

Schijf een functie die na het laden van de pagina de opties van je <select> ophaalt als een array, doorloop die array en zodra je een waarde tegenkomt die gelijk is aan je variable zet je die optie alszijnde geselecteerd.

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.

dinsdag 23 augustus 2005 17:56

Acties:

DriesA

Topicstarter

Zou je dat a.u.b. iets duidelijker/gedetailleerder kunnen verwoorden? Je uitleg is me net iets te hoog gegrepen.

dinsdag 23 augustus 2005 18:01

Acties:

avon

Met document.mijnform.Keuzes.value = invoer; werkt het prima!

Gratis webwinkel beginnen? Met Onetoshop.com kunt u direct beginnen!

dinsdag 23 augustus 2005 18:04

Acties:

Salandur

Software Engineer

je kan van een select in JS een optie selecteren door selectedIndex een waarde te geven. Je moet dus alle waarden langs lopen en controleren. zodra deze gevonden is selecteer je die waarde door selectedIndex een waarde te geven.

JavaScript:

var = waardeX;
index = 0;
found = false;
while (!found) {
  if (document.formulier.selectie[index].value == var) {
    found = true;
    document.formulier.selectie.selectedIndex = index;
  }
  else {
    index ++;
  }
}

bijbehoordne html:

HTML:

<form name="formulier">
<select name="selectie">
 <option value="value1">Bla</option>
  <option vlaue="valueX">Boe</option>
</select>
</form>

Overigs hoeft dit niet te werken want ik weet niet uit mijn hoofd hoe de DOM precies in elkaar steekt

Assumptions are the mother of all fuck ups | iRacing Profiel

dinsdag 23 augustus 2005 18:47

Acties:

Alex

Je kunt beter een bepaald element opzoeken aan de hand van zijn of haar id.
Zie voor een klein tutorial: deze link bij W3Schools.
Dan is het een stuk browser onafhankelijker

.

Deze post is bestemd voor hen die een tegenwoordige tijd kunnen onderscheiden van een toekomstige halfvoorwaardelijke bepaalde subinverte plagiale aanvoegend intentioneel verleden tijd.
- Giphart

dinsdag 23 augustus 2005 19:20

Acties:

djluc

Bijvoorbeeld:

HTML:

<body onload="document.getElementById('item-'+JEVARIABLE).selected='true';">
<select size="1" name="Keuzes">
    <option id="item-1">Keuze1</option>
    <option id="item-2">Keuze2</option>
    <option id="item-3">Keuze3</option>
</select>

[ Voor 30% gewijzigd door djluc op 23-08-2005 19:21 ]

dinsdag 23 augustus 2005 23:18

Acties:

DriesA

Topicstarter

Hey bedankt allemaal. Dit is het eindresultaat:

code:

<html>
<head>
<script type="text/javascript" language="JavaScript">
var passed     = location.search ? unescape(location.search.substring(1)) + '&' : '';
var keuze       = passed ? passed.substring(0,passed.indexOf('&')) : '';
</script>
</head>

<body onload="document.getElementById('item-'+keuze).selected='true';">
<select size="1" name="Keuzes">
    <option id="item-1">Keuze1</option>
    <option id="item-2">Keuze2</option>
    <option id="item-3">Keuze3</option>
    <option id="item-4">Keuze4</option>
    <option id="item-5">Keuze5</option>
    <option id="item-6">Keuze6</option>
</select>
</body>
</html>

Zoals je kan zien wordt de variabele bepaald door een parameter in de URL.
Bijvoorbeeld:
http://www.movingcool.be/movingcool/beta/test.html?2
http://www.movingcool.be/movingcool/beta/test.html?5

Maar als je geen variabele (voorbeeld) meegeeft, dan krijg je een foutmelding. ('document.getElementById(...)' is leeg of geen object).

Hoe bouw ik in dat als er geen waarde voor "keuze" is gedefinieerd, hij als waarde "1" neemt?

dinsdag 23 augustus 2005 23:25

Acties:

André

Analytics dude

Dan check je in je JS of keuze leeg is, zo ja dan keuze = 1;

dinsdag 23 augustus 2005 23:26

Acties:

Johnny

ondergewaardeerde internetguru

Dries_Aendekerk schreef op dinsdag 23 augustus 2005 @ 23:18:
Hoe bouw ik in dat als er geen waarde voor "keuze" is gedefinieerd, hij als waarde "1" neemt?

code:

1
2
3

if(!keuze) {
keuze = 1;
}

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.

dinsdag 23 augustus 2005 23:44

Acties:

Borizz

Alex de Groot schreef op dinsdag 23 augustus 2005 @ 18:47:
Je kunt beter een bepaald element opzoeken aan de hand van zijn of haar id.
Zie voor een klein tutorial: deze link bij W3Schools.
Dan is het een stuk browser onafhankelijker .

Dat ben ik niet helemaal met je eens, vooral de oudere browsers (Netscape & IE 4 ) ondersteunen geen document.getElementById, terwijl document.forms, bij mijn weten in oudere browsers ook werkt! Voor input elementen in een form zou ik dus geen getElementById gebruiken!

If I can't fix it, it ain't broken.

dinsdag 23 augustus 2005 23:49

Acties:

zeroxcool

Of je gebruikt code uit Dreamweaver:

JavaScript:

// © Copyright Macromedia (www.macromedia.com)
function getObject(name, place) {
    var p,i,x;
    if (!place) place = document;
    if ((p = name.indexOf("?")) > 0 && parent.frames.length) {
        place = parent.frames[name.substring(p+1)].document;
        name = name.substring(0,p);
    }
    if (!(x = place[name]) && place.all) x = place.all[name];
    if (!(x = place[name]) && place.getElementById) x = place.getElementById(name);
    for (i = 0; !x && i < place.forms.length; i++) x = place.forms[i][name];
    for (i = 0; !x && place.layers && i < place.layers.length; i++) x = getObject(name,place.layers[i].document);
    if (x == '') x = 0;
    return x;
}

Die is zo'n beetje compatible met iedere browser.

[ Voor 7% gewijzigd door zeroxcool op 23-08-2005 23:50 ]

zeroxcool.net - curity.eu

woensdag 24 augustus 2005 10:02

Acties:

crisp

Devver

Pixelated

Borizz schreef op dinsdag 23 augustus 2005 @ 23:44:
[...]

Dat ben ik niet helemaal met je eens, vooral de oudere browsers (Netscape & IE 4 ) ondersteunen geen document.getElementById, terwijl document.forms, bij mijn weten in oudere browsers ook werkt! Voor input elementen in een form zou ik dus geen getElementById gebruiken!

Wie gebruikt er nog NS4 of IE4 dan?

Intentionally left blank

woensdag 24 augustus 2005 11:19

Acties:

Borizz

crisp schreef op woensdag 24 augustus 2005 @ 10:02:
[...]

Wie gebruikt er nog NS4 of IE4 dan?

Niet zo gek veel mensen, maar het was meer om aan te geven dat document.forms zeker overal werkt, omdat ik niet weet voor/vanaf welke browsers(versies) document.getElementById wel perfect werkt!

If I can't fix it, it ain't broken.

woensdag 24 augustus 2005 11:54

Acties:

DriesA

Topicstarter

Hey,
Het is geen essentieel script, dus ik hou het simpel en ik kijk enkel naar meer recente browsers (meer dan 98% van mijn bezoekers heeft IE6, Firefox1, of recente Opera).

Ik heb de pagina trouwens uitgebreid met twee variabelen:
http://www.movingcool.be/movingcool/beta/test.html?1&2
http://www.movingcool.be/movingcool/beta/test.html?1&3
http://www.movingcool.be/movingcool/beta/test.html?2&2
http://www.movingcool.be/movingcool/beta/test.html?2&3
http://www.movingcool.be/movingcool/beta/test.html

Bedankt voor jullie hulp!

Dries

[ Voor 12% gewijzigd door DriesA op 24-08-2005 11:54 ]

woensdag 24 augustus 2005 12:36

Acties:

crisp

Devver

Pixelated

Borizz schreef op woensdag 24 augustus 2005 @ 11:19:
[...]

Niet zo gek veel mensen, maar het was meer om aan te geven dat document.forms zeker overal werkt, omdat ik niet weet voor/vanaf welke browsers(versies) document.getElementById wel perfect werkt!

Netscape vanaf versie 6 (gebaseerd op Mozilla), IE vanaf versie 5.0

Intentionally left blank