[JS]bij twee <select>'s bepaalde combi onmogelijk maken - Softwareontwikkeling

woensdag 24 augustus 2005 15:41

Acties:

Topicstarter

Hey,

Ik heb een formulier, dat twee selects bevat:

code:

<select name="wagen" size="1">
<option id="wagen-0" selected>&nbsp;</option>
<option id="wagen-1">koelbox</option>
<option id="wagen-2">koelaanhangwagen</option>
<option id="wagen-3">vriesbox</option>
<option id="wagen-4">vriesaanhangwagen</option>
<option id="wagen-5">tapwagen</option>
</select>
<select name="grootte" size="1">
<option id="grootte-0" selected>&nbsp;</option>
<option id="grootte-1">8 m³</option>
<option id="grootte-2">11 m³</option>
<option id="grootte-3">16 m³</option>
<option id="grootte-4">19 m³</option>
<option id="grootte-5">23 m³</option>
<option id="grootte-6">35 m³</option>
</select>

Men kan dus bij dit bestelformulier bijvoorbeeld een koelwagen van 19m³ kiezen. Maar niet alle combinaties zijn mogelijk, enkel de volgende:
wagen-0 => alles mag
wagen-1 => enkel grootte-4 en grootte-5 mag
wagen-2 => enkel grootte-1, grootte-2, grootte-3, grootte-5, grootte-6
wagen-3 => enkel grootte-5
wagen-4 => enkel grootte-2
wagen-5 => enkel grootte-0

Is het mogelijk dat als de gebruiker een bepaalde wagen kiest, dat de onmogelijke combinaties bij 'grootte' niet selecteerbaar zijn en eventueel ook in het grijs worden aangeduid?

Alvast bedankt!

[ Voor 20% gewijzigd door DriesA op 24-08-2005 15:41 ]

woensdag 24 augustus 2005 15:42

Acties:

BtM909

Watch out Guys...

Wat heb je zelf geprobeerd en waar liep je precies tegenaan?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 24 augustus 2005 15:51

Acties:

Verwijderd

Dries_Aendekerk schreef op woensdag 24 augustus 2005 @ 15:41:
Hey,

Ik heb een formulier, dat twee selects bevat:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<select name="wagen" size="1">
<option id="wagen-0" selected>&nbsp;</option>
<option id="wagen-1">koelbox</option>
<option id="wagen-2">koelaanhangwagen</option>
<option id="wagen-3">vriesbox</option>
<option id="wagen-4">vriesaanhangwagen</option>
<option id="wagen-5">tapwagen</option>
</select>
<select name="grootte" size="1">
<option id="grootte-0" selected>&nbsp;</option>
<option id="grootte-1">8 m³</option>
<option id="grootte-2">11 m³</option>
<option id="grootte-3">16 m³</option>
<option id="grootte-4">19 m³</option>
<option id="grootte-5">23 m³</option>
<option id="grootte-6">35 m³</option>
</select>
Men kan dus bij dit bestelformulier bijvoorbeeld een koelwagen van 19m³ kiezen. Maar niet alle combinaties zijn mogelijk, enkel de volgende:
wagen-0 => alles mag
wagen-1 => enkel grootte-4 en grootte-5 mag
wagen-2 => enkel grootte-1, grootte-2, grootte-3, grootte-5, grootte-6
wagen-3 => enkel grootte-5
wagen-4 => enkel grootte-2
wagen-5 => enkel grootte-0

Is het mogelijk dat als de gebruiker een bepaalde wagen kiest, dat de onmogelijke combinaties bij 'grootte' niet selecteerbaar zijn en eventueel ook in het grijs worden aangeduid?

Alvast bedankt!

Tips:

- zoek eens naar 'onChange'
- zoek eens naar document.getElementById('hetid').enabled = false; o.i.d.

Succes!

woensdag 24 augustus 2005 17:59

Acties:

DriesA

Topicstarter

Hey,
Ik heb het gevonden!
Dit moet in de header:

code:

keuze = new Array(
new Array(
new Array("19 m³", "grootte-4"),
new Array("23 m³", "grootte-5")
),
new Array(
new Array("8 m³", "grootte-1"),
new Array("11 m³", "grootte-2"),
new Array("16 m³", "grootte-3"),
new Array("23 m³", "grootte-5"),
new Array("35 m³", "grootte-6")
),
new Array(
new Array("23 m³", "grootte-5")
),
new Array(
new Array("11 m³", "grootte-2")
),
new Array(
new Array(" ", "grootte-0")
)
);
function fillSelectFromArray(selectCtrl, itemArray, goodPrompt, badPrompt, defaultItem) {
var i, j;
var prompt;
// empty existing items
for (i = selectCtrl.options.length; i >= 0; i--) {
selectCtrl.options[i] = null; 
}
prompt = (itemArray != null) ? goodPrompt : badPrompt;
if (prompt == null) {
j = 0;
}
else {
selectCtrl.options[0] = new Option(prompt);
j = 1;
}
if (itemArray != null) {
// add new items
for (i = 0; i < itemArray.length; i++) {
selectCtrl.options[j] = new Option(itemArray[i][0]);
if (itemArray[i][1] != null) {
selectCtrl.options[j].value = itemArray[i][1]; 
}
j++;
}
// select first item (prompt) for sub list
selectCtrl.options[0].selected = true;
   }
}

Dit komt in de body:

code:

<form name="formulier">
<SELECT NAME="wagen" onChange="fillSelectFromArray(this.form.Grootte, ((this.selectedIndex == -1) ? null : keuze[this.selectedIndex-1]));">
     <option Value= "-1" id="wagen-0">&nbsp;</option>
     <OPTION VALUE=1 id="wagen-1">Koelbox</OPTION>
     <OPTION VALUE=2 id="wagen-2">Koelaanhangwagen</OPTION>
     <OPTION VALUE=3 id="wagen-3">Vriesbox</OPTION>
     <OPTION VALUE=4 id="wagen-4">Vriesaanhangwagen</OPTION>
     <OPTION VALUE=5 id="wagen-5">Tapwagen</OPTION>
</SELECT>
<SELECT NAME="Grootte" SIZE="1">
     <option id="grootte-0">&nbsp;</option>
     <option id="grootte-1">8 m³</option>
     <option id="grootte-2">11 m³</option>
     <option id="grootte-3">16 m³</option>
     <option id="grootte-4">19 m³</option>
     <option id="grootte-5">23 m³</option>
     <option id="grootte-6">35 m³</option>
</SELECT>
</form>

Bij elke onchange-event in de eerst <select> wordt dus de tweede aangepast. Nu zou ik ook willen dat dit gebeurd als de pagina wordt geladen. Dus:

code:

1	<BODY onLoad="fillSelectFromArray(this.form.Grootte, ((this.selectedIndex == -1) ? null : keuze[this.selectedIndex-1]));">

Maar dan krijg ik een foutmelding omdat hij "this.form" niet kent. Weet iemand hoe ik bovenstaande regel moet aanpassen zodat hij correct verwijst naar de twee selects in "formulier"?

woensdag 24 augustus 2005 22:20

Acties:

Verwijderd

Dries_Aendekerk schreef op woensdag 24 augustus 2005 @ 17:59:
Hey,
Ik heb het gevonden!
Dit moet in de header:

code:

keuze = new Array(
new Array(
new Array("19 m³", "grootte-4"),
new Array("23 m³", "grootte-5")
),
new Array(
new Array("8 m³", "grootte-1"),
new Array("11 m³", "grootte-2"),
new Array("16 m³", "grootte-3"),
new Array("23 m³", "grootte-5"),
new Array("35 m³", "grootte-6")
),
new Array(
new Array("23 m³", "grootte-5")
),
new Array(
new Array("11 m³", "grootte-2")
),
new Array(
new Array(" ", "grootte-0")
)
);
function fillSelectFromArray(selectCtrl, itemArray, goodPrompt, badPrompt, defaultItem) {
var i, j;
var prompt;
// empty existing items
for (i = selectCtrl.options.length; i >= 0; i--) {
selectCtrl.options[i] = null; 
}
prompt = (itemArray != null) ? goodPrompt : badPrompt;
if (prompt == null) {
j = 0;
}
else {
selectCtrl.options[0] = new Option(prompt);
j = 1;
}
if (itemArray != null) {
// add new items
for (i = 0; i < itemArray.length; i++) {
selectCtrl.options[j] = new Option(itemArray[i][0]);
if (itemArray[i][1] != null) {
selectCtrl.options[j].value = itemArray[i][1]; 
}
j++;
}
// select first item (prompt) for sub list
selectCtrl.options[0].selected = true;
   }
}

Dit komt in de body:

code:

<form name="formulier">
<SELECT NAME="wagen" onChange="fillSelectFromArray(this.form.Grootte, ((this.selectedIndex == -1) ? null : keuze[this.selectedIndex-1]));">
     <option Value= "-1" id="wagen-0">&nbsp;</option>
     <OPTION VALUE=1 id="wagen-1">Koelbox</OPTION>
     <OPTION VALUE=2 id="wagen-2">Koelaanhangwagen</OPTION>
     <OPTION VALUE=3 id="wagen-3">Vriesbox</OPTION>
     <OPTION VALUE=4 id="wagen-4">Vriesaanhangwagen</OPTION>
     <OPTION VALUE=5 id="wagen-5">Tapwagen</OPTION>
</SELECT>
<SELECT NAME="Grootte" SIZE="1">
     <option id="grootte-0">&nbsp;</option>
     <option id="grootte-1">8 m³</option>
     <option id="grootte-2">11 m³</option>
     <option id="grootte-3">16 m³</option>
     <option id="grootte-4">19 m³</option>
     <option id="grootte-5">23 m³</option>
     <option id="grootte-6">35 m³</option>
</SELECT>
</form>

Bij elke onchange-event in de eerst <select> wordt dus de tweede aangepast. Nu zou ik ook willen dat dit gebeurd als de pagina wordt geladen. Dus:

code:

1	<BODY onLoad="fillSelectFromArray(this.form.Grootte, ((this.selectedIndex == -1) ? null : keuze[this.selectedIndex-1]));">

Maar dan krijg ik een foutmelding omdat hij "this.form" niet kent. Weet iemand hoe ik bovenstaande regel moet aanpassen zodat hij correct verwijst naar de twee selects in "formulier"?

Ik had geen zin om door die gigantisch onoverzichtelijke code te werken, dus ik heb zelf even een voorbeeldje in elkaar geknutseld. Overigens kun je m.i. zaken als deze het beste serverside oplossen. Op die manier beperk je de hoeveelheid clientsidecode wat de netheid en overzichtelijkheid van je pagina ten goede komt.

HTML:

<html>
    <head>
        <title></title>
        <script language="javascript">
        
            function setSecondSelectProperties(sSelect1, sSelect2)
            {
                var oSelect1 = document.getElementById(sSelect1);
                var oSelect2 = document.getElementById(sSelect2);
                
                var aProperties = new Array(oSelect1.options.length);

                for (i = 0; i < aProperties.length; i++)
                {
                    aProperties["" + oSelect1.options[i].value] = new Array(oSelect2.lenght);
                }
                
                //Eerste [] = value van select1 / tweede [] = value van select2
                aProperties["0"]["7"]  = "hidden";
                aProperties["0"]["8"]  = "hidden";
                aProperties["3"]["7"]  = "hidden";
                aProperties["3"]["10"] = "hidden";
                aProperties["3"]["11"] = "hidden";

                oSelect2.options[0].selected = "selected";              

                for (i = 0; i < oSelect2.options.length; i++)
                { 
                    if (aProperties[oSelect1.options[oSelect1.selectedIndex].value][oSelect2.options[i].value] == "hidden")
                    {
                        oSelect2.options[i].style.display = "none"; 
                    }
                    else
                    {
                        oSelect2.options[i].style.display  = "block";   
                    }
                }
            }           

        </script>
    </head>
    <body onload="setSecondSelectProperties('select1', 'select2')">
        <select id="select1" onchange="setSecondSelectProperties('select1', 'select2')">
            <option>Maak een keuze</option>
            <option value="0">a</option>
            <option value="1">b</option>
            <option value="2">c</option>
            <option value="3">d</option>
            <option value="4">e</option>
            <option value="5">f</option>
        </select>
        <select id="select2">
            <option>Maak een keuze</option>
            <option value="6">g</option>
            <option value="7">h</option>
            <option value="8">i</option>
            <option value="9">j</option>
            <option value="10">k</option>
            <option value="11">l</option>
        </select>
    </body>
</html>

[ Voor 81% gewijzigd door Verwijderd op 25-08-2005 00:55 ]

woensdag 24 augustus 2005 23:56

Acties:

DriesA

Topicstarter

Dries_Aendekerk schreef op woensdag 24 augustus 2005 @ 17:59:Bij elke onchange-event in de eerst <select> wordt dus de tweede aangepast. Nu zou ik ook willen dat dit gebeurd als de pagina wordt geladen. Dus:
code:
1
<BODY onLoad="fillSelectFromArray(this.form.Grootte, ((this.selectedIndex == -1) ? null : keuze[this.selectedIndex-1]));">
Maar dan krijg ik een foutmelding omdat hij "this.form" niet kent. Weet iemand hoe ik bovenstaande regel moet aanpassen zodat hij correct verwijst naar de twee selects in "formulier"?

Het antwoord was dus:

code:

1	]<BODY onLoad="fillSelectFromArray(document.formulier.wagen.form.Grootte, ((document.formulier.wagen.selectedIndex == -1) ? null : keuze[document.formulier.wagen.selectedIndex-1]));">

.

Mijn formulier is eindelijk af! Zo kan ik met een gerust hart gaan slapen.

@deprogrammeur: De code is misschien wel onoverzichtelijk, ja, maar hij werkt.

Ik heb je code even geprobeerd, maar hij werkt niet. Waarschijnlijk heb ik het niet door. Enfin, ik heb wat ik wil.

Bedankt allemaal voor het meedenken!

donderdag 25 augustus 2005 00:45

Acties:

Verwijderd

Dries_Aendekerk schreef op woensdag 24 augustus 2005 @ 23:56:
[...]

Het antwoord was dus:
code:
1
]<BODY onLoad="fillSelectFromArray(document.formulier.wagen.form.Grootte, ((document.formulier.wagen.selectedIndex == -1) ? null : keuze[document.formulier.wagen.selectedIndex-1]));">
.

Mijn formulier is eindelijk af! Zo kan ik met een gerust hart gaan slapen.

@deprogrammeur: De code is misschien wel onoverzichtelijk, ja, maar hij werkt. Ik heb je code even geprobeerd, maar hij werkt niet. Waarschijnlijk heb ik het niet door. Enfin, ik heb wat ik wil.

Bedankt allemaal voor het meedenken!

Ik zie het.

Ik heb mijn code trouwens ook wat meer toegesneden op jouw vraag, dus mocht je hem voor de overzichtelijkheid willen implementeren, dan moet dat een piece of cake zijn nu. Lees ook even mijn opmerking.

Edit:

Die id's moeten trouwens values worden.

[ Voor 9% gewijzigd door Verwijderd op 25-08-2005 00:49 ]