[JS]waarde selected in dropdown opslaan.

[aardbeix15]

Tweakers het volgende.

Ik ben een dropdownbox welke is gevuld met periode_niveaus en een dropdownbox met periode_code.

Dus in box periode_niveau zit:
- jaar
- half jaar
- trimester
- kwartaal
- maand

en in box periode_code zit:

- jan 2003
- feb 2004

of

- 1e halfjaar 2004

de vulling van deze box wordt dynamsich aangestuurd door de selectie die op dat moment is gedaan in de eerste box periode_niveau.

Wat ik graag wil is dat wanneer een gebruiker bijvoorbeeld eerst in de selectie had staan; periode_niveau=maand, periode_code=jan. 2003
dat wanneer hij kiest voor kwartaal dat er dan komt te staan
periode_niveau=kwartaal, periode_code=1e kwartaal 2003

ander voorbeeld;

wanneer een gebruiker bijvoorbeeld eerst in de selectie had staan; periode_niveau=maand, periode_code=december. 2002
dat wanneer hij kiest voor halfjaar dat er dan komt te staan
periode_niveau=halfjaar, periode_code=2e halfjaar 2002

kortom ik wil de waarde die in de periode_code box stond vast houden en gebruiken om de selected waarde in de nieuwe periode_code box, na het wijzigen van peridoe_niveau, vast houden en zoveel mogelijk in de buurt van de vorige periode_code houden. Zo hoeft de gebruik niet steeds vanaf 2005 (de maximale waarde nu in de database) af te dalen naar de periode die ligt bij zijn vorige periode_code.

Voor de duidelijkheid van mijn verhaal heb ik steeds een beetje scrhijf taal gebruikt. Normaliter zijn er voor de periode_niveau een code en een omschrijving beschikbaar in te trant van 'JAAR' en 'jaar' voor de periode_code geldt hetzelfde 'MAAND.200401' en 'januari 2004' .

De volgende code heb ik reeds beschikbaar:
form

code:

<select name="p_rbtype_code" style="WIDTH: 150px" size="1" onChange="setOptions1(document.perspectief_variabelen.p_rbtype_code.options[document.perspectief_variabelen.p_rbtype_code.selectedIndex].value);">


<select name="p_periode_lvl" style="WIDTH: 150px" size="1" onChange="setOptions2(document.perspectief_variabelen.p_periode_lvl.options[document.perspectief_variabelen.p_periode_lvl.selectedIndex].value);initdt(document.perspectief_variabelen);">
<option value ="MAAND" selected>maand</option>
<option value ="KWARTAAL">kwartaal</option>
<option value ="TRIMESTER">trimester</option>
<option value ="HALFJAAR">halfjaar</option>
<option value ="JAAR">jaar</option>
</select>

<select name="p_periode_code" style="WIDTH: 300px" size="1" onChange="read_periode_code();">
<option value ="MAAND.200512">december 2005</option>
<option value ="MAAND.200511">november 2005</option>
<option value ="MAAND.200510">oktober 2005</option>
<option value ="MAAND.200509">september 2005</option>
<option value ="MAAND.200508">augustus 2005</option>

etc.
</select>

JS

code:

<!--
function read_periode_code()
{
var split_periode_code=(document.perspectief_variabelen.p_periode_code.options[document.perspectief_variabelen.p_periode_code.selectedIndex].value)
var periode_code_array=split_periode_code.split(".");
var periode_code_niv=periode_code_array[0];
var periode_code_cod=periode_code_array[1];
alert(periode_code_niv+"."+periode_code_cod)
}
function initdt(perspectief_variabelen) {
var periode_code_niv=read_periode_code(periode_code_niv);
var periode_code_cod=read_periode_code(periode_code_cod);
if ( document.perspectief_variabelen.p_periode_lvl.value == "JAAR") {
}
if ( document.perspectief_variabelen.p_periode_lvl.value == "HALFJAAR") {
perspectief_variabelen.p_periode_code.value = "p_periode_code_array[0].p_periode_code_array[1]";
}
if ( document.perspectief_variabelen.p_periode_lvl.value == "TRIMESTER") {
perspectief_variabelen.p_periode_code.value = "p_periode_code_array[0].p_periode_code_array[1]";
}
if ( document.perspectief_variabelen.p_periode_lvl.value == "KWARTAAL") {
perspectief_variabelen.p_periode_code.value = "p_periode_code_array[0].p_periode_code_array[1]";
}
if ( document.perspectief_variabelen.p_periode_lvl.value == "MAAND") {
perspectief_variabelen.p_periode_code.value = "p_periode_code_array[0].p_periode_code_array[1]";
}
function setOptions2(chosen) {
var selbox2 = document.perspectief_variabelen.p_periode_code;
selbox2.options.length = 0;
if (chosen == "JAAR") {
selbox2.options[selbox2.options.length] = new Option('2005','JAAR.2005');
selbox2.options[selbox2.options.length] = new Option('2004','JAAR.2004');
selbox2.options[selbox2.options.length] = new Option('2003','JAAR.2003');
selbox2.options[selbox2.options.length] = new Option('2002','JAAR.2002');
}
if (chosen == "HALFJAAR") {
selbox2.options[selbox2.options.length] = new Option('2e halfjaar 2005','HALFJAAR.200502');
selbox2.options[selbox2.options.length] = new Option('1e halfjaar 2005','HALFJAAR.200501');
etc.etc.
}
if (chosen == "TRIMESTER") {
selbox2.options[selbox2.options.length] = new Option('3e 4maandsperiode 2005','TRIMESTER.200503');
selbox2.options[selbox2.options.length] = new Option('2e 4maandsperiode 2005','TRIMESTER.200502');
selbox2.options[selbox2.options.length] = new Option('1e 4maandsperiode 2005','TRIMESTER.200501');
selbox2.options[selbox2.options.length] = new Option('3e 4maandsperiode 2004','TRIMESTER.200403');
etc.
}
if (chosen == "KWARTAAL") {
selbox2.options[selbox2.options.length] = new Option('4e kwartaal 2005','KWARTAAL.200504');
selbox2.options[selbox2.options.length] = new Option('3e kwartaal 2005','KWARTAAL.200503');
selbox2.options[selbox2.options.length] = new Option('2e kwartaal 2005','KWARTAAL.200502');
selbox2.options[selbox2.options.length] = new Option('1e kwartaal 2005','KWARTAAL.200501');
selbox2.options[selbox2.options.length] = new Option('4e kwartaal 2004','KWARTAAL.200404');
selbox2.options[selbox2.options.length] = new Option('3e kwartaal 2004','KWARTAAL.200403');
selbox2.options[selbox2.options.length] = new Option('2e kwartaal 2004','KWARTAAL.200402');
selbox2.options[selbox2.options.length] = new Option('1e kwartaal 2004','KWARTAAL.200401');
selbox2.options[selbox2.options.length] = new Option('4e kwartaal 2003','KWARTAAL.200304');
selbox2.options[selbox2.options.length] = new Option('3e kwartaal 2003','KWARTAAL.200303');
etc.etc.
}
if (chosen == "MAAND") {
selbox2.options[selbox2.options.length] = new Option('december 2005','MAAND.200512');
selbox2.options[selbox2.options.length] = new Option('november 2005','MAAND.200511');
selbox2.options[selbox2.options.length] = new Option('oktober 2005','MAAND.200510');
selbox2.options[selbox2.options.length] = new Option('september 2005','MAAND.200509');
selbox2.options[selbox2.options.length] = new Option('augustus 2005','MAAND.200508');
selbox2.options[selbox2.options.length] = new Option('juli 2005','MAAND.200507');
selbox2.options[selbox2.options.length] = new Option('juni 2005','MAAND.200506');
selbox2.options[selbox2.options.length] = new Option('mei 2005','MAAND.200505');
selbox2.options[selbox2.options.length] = new Option('april 2005','MAAND.200504');
etc.etc.
}
}
//-->
</script>

probleem wat ik hiermee heb ik dat steeds wel de selected waarde wordt uitgezlen maar pas na het moment van switchen van de periode_niveau box, ik krijg dan de actuewle waarde terwijl ik eigenlijkd evorige waarde zou willen hebben.

Er zit een alert in om even te kunnen kijken wat er in staat en verder moet ik nog nadenken over het aanpassen van de waarden die in de array zitten voor het aanmaken van een zinvolle selected value, maar dat is van later zorg.

Ik ben doorgaans meer bedreven in PL/SQL en niet in JS dus ik hoop dat mensen hun lciht er hier over kunnen laten schijnen.


_{n.b. voor de mensen die zeggen dat het niet hard coded moet, die hebben gelijk; het geheel bouw ik afhankelijk van de databasevulling op met PL/SQL maar om het duidelijk te houden heb ik deze syntax er uit gelaten}

[gorgi_19]

JS == clientside == Webdesign & Graphics

>> Webdesign & Graphics

[crisp]

als je nu vlak voor je selbox2.options.length = 0; de waarde tijdelijk opslaat:

JavaScript:

var originalValue = selbox2.options[selbox2.selectedIndex].value;

dan kan je daarmee later weer aan de slag

[aardbeix15]

crisp schreef op vrijdag 18 maart 2005 @ 09:46:
als je nu vlak voor je selbox2.options.length = 0; de waarde tijdelijk opslaat:

JavaScript:

var originalValue = selbox2.options[selbox2.selectedIndex].value;

dan kan je daarmee later weer aan de slag

da's idd volgens mij wel een goed stap in de richting. Nu is mijn kennis van JS ook ngo zo dat ik dan niet goed weet hoe ik deze var vanuit de functie setOptions2 moet benaderen in de functie read_periode_code om hem daar vedrer te verwerken.

[crisp]

Ik neem aan dat je read_periode_code aan het eind van setOptions2 aanroept? Dan kan je de originalValue natuurlijk gewoon als parameter meegeven:

JavaScript:

read_periode_code(originalValue);

..

function read_periode_code(originalValue)
{
  // doe iets met originalValue
}

[aardbeix15]

crisp helemaal te gek ik heb nu de vorige waarde die ik kan gaan afhandelen om zo de dichtsbijliggende periode te selecteren en als selected waarde te laden.