dropdown wijzigen bij selectie

[Kaastosti]

Het leek me zo simpel te implementeren, maar ik stuit continu op problemen die ik niet op weet te lossen. En na de zoveelste work-around vraag ik me af of ik niet gewoon veel te moeilijk aan het doen ben. De situatie is alsvolgt:

Ik heb een systeem waarbij er in de database een paar routers staan. Ook staan er in de database apparaten met daarbij welke poort ze op de router in gebruik hebben. Bij het wijzigen van die data via een menu, wil ik het zo voor elkaar krijgen dat men 2 dropdown menu's krijgt. Eentje met alle routers op die locatie en eentje met de poorten die op de geselecteerde router nog vrij zijn.

Om dit te bereiken heb ik in PHP een arraystructuur die er als volgt uit ziet:

[0]
   [device_id] => 30
   [name] => Router 1
   [ports]
      [0] => 5
      [1] => 12
      [2] => 13
      [3] => 18
[1]
   [device_id] => 41
   [name] => Router 2
   [ports]
      [0] => 15
      [1] => 16
      [2] => 17

De dropdowns zitten uiteraard in een form, en om het javascript gedeelte werkend te krijgen (dat is nu eenmaal niet echt mijn ding) heb ik een scriptje gebruikt waarbij de pagina opnieuw aangeroepen wordt met als GET-argument het id van de geselecteerde router.

Dat refreshen van de pagina is niet echt geweldig, aangezien er mogelijk nog meer variabelen geselecteerd zijn die niet bij een refresh mogen verdwijnen. Om alles nou in de url mee te geven vind ik een beetje heel erg ranzig, dus ik ben op zoek naar een andere oplossing.

Mijn idee is dat ik misschien alle poort-selectie menu's kan bouwen, maar alleen de geselecteerde visible te maken. En dan proberen of ik het voor elkaar kan krijgen om, als ik een andere router selecteer uit het eerste menu, dat dan alleen het poort menu wat bij die router hoort zichtbaar wordt.

Het probleem wat ik hierbij ondervind is dat ik een beetje de weg kwijt raak tussen variabelen in javascript en php. Al die nummertjes vliegen door m'n hoofd en komen er maar niet gestructureerd uit. Ik vraag niet om een heel werkend script, maar een schopje in de goede javascript-richting zou heel welkom zijn.

[GFoAP]

Ik heb ooit ergens een werkend script vandaan gehaald:

code:

<select name="product" size="1" id="product" onChange="redirect(this.options.selectedIndex)">

en daar hing de volgende javascript dan aan:

code:

<script>
<!--

var groups=document.doublecombo.product.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

//Collection 1616
group[0][0]=new Option ("0500","0500")
group[0][1]=new Option ("1186","1186")
group[0][2]=new Option ("1236","1236")
group[0][3]=new Option ("2001","2001")
group[0][4]=new Option ("2030","2030")
group[0][5]=new Option ("2266","2266")

//Collection 1416
group[1][0]=new Option("1000","1000")
group[1][1]=new Option("1200","1200")
group[1][2]=new Option("1400","1400")

//Collection 1012
group[2][0]=new Option("0100","0100")
group[2][1]=new Option("1000","1000")

//Collection 1010
group[3][0]=new Option("0505","0505")
group[3][1]=new Option("1155","1155")

//Ascot
group[4][0]=new Option("Agave","Agave")

//Cambridge
group[5][0]=new Option("Berry","Berry")


var temp=document.doublecombo.kleur

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

//-->
</script>

Mischien dat je daar wat aan hebt.

[Kaastosti]

Is die compleet? Ik loop 'm namelijk door en de selectie die je doet geeft alleen aan de functie mee welke index geselecteerd is. Daarna moet er dus nog een dropdown zijn die wat met de output van het geheel doet.

[T-MOB]

Er zijn verschillende mogelijkheden. Je kunt inderdaad de dropdowns voor alle poortselectie-mogelijkheden bouwen. Die geef je dan een id dat correspondeert met de waarde in de andere dropdown zodat je de display kunt togglen.

Mooier lijkt me echter om met DOM operaties de select van opties te voorzien. Je maakt dan met behulp van PHP javascript arrays aan met de benodigde waarden en verandert de inhoud van de select aan de hand van die arrays. In code:

HTML:

<html>
<head>
 <script type="text/javascript">
/* vars in global scope */
var poortValues; 
var poortLabels;
var id = 'html-Id-Van-Select';

/* init correct values for dropdown per location
 * set correctly with PHP 
 */
function getValues(locatie) {
    if (locatie == 'schuur') { 
        poortValues = new Array("80", "21", "22");
        poortLabels = new Array("web", "FTP", "SSH");
    } else if (locatie == 'badkamer') {
        poortValues = new Array("8080", "3306");
        poortLabels = new Array("Secure web", "MySQL");
    } else {
        poortValues = new Array("");
        poortLabels = new Array("Selecteer eerst een locatie");
    }
}

/* empties the list */
function emptyList() {
    var select = document.getElementById(id);
    while (select.hasChildNodes()) {
        select.removeChild(select.firstChild);
    }
}

/* function that does the trick, call onchange from first select */
function replaceSelect(locatie) {
    getValues(locatie);
    emptyList();
    
    for (var i=0; i<poortValues.length; i++) {
        var option = document.createElement('option');
        option.setAttribute("value", poortValues[i]);
        
        var optionText = document.createTextNode(poortLabels[i]);
        
        option.appendChild(optionText);
        document.getElementById(id).appendChild(option);
    }
}
 </script>
 <title>JS test</title>
</head>
<body>
<select name="select1" onchange="replaceSelect(this.options[this.selectedIndex].value)">
 <option value="" selected="selected">Selecteer...</option>
 <option value="schuur">Schuur</option>
 <option value="badkamer">Badkamer</opion>
</select>

<select bame="select2" id="html-Id-Van-Select">
 <option value="">Selecteer eerst een locatie</option>
</select>

</body>
</html>

en werkend te zien

[ Voor 13% gewijzigd door T-MOB op 12-05-2005 14:30 ]

[Kaastosti]

Ah kijk dat biedt perspectieven Daar kan ik inderdaad alle mogelijke menustructuren in gieten... eens aan de knutsel. Bedankt voor de hulp, ik ga het proberen!

Alleen vindt javascript het niet leuk om variabelen een waarde toe te kennen binnen php. Ik bedoel dit:

PHP:

<?
$poortValues = "poortValues = new Array(\"80\", \"21\", \"22\");";
$poortLabels = "poortLabels = new Array(\"Poort 80\", \"Poort 21\", \"Poort 22\")";
?>

<script type="text/javascript">
   if(locatie == '20') {
      <?= $poortValues; ?>
      <?= $poortLabels; ?>
   }
</script>

Als ik de source bekijk van de uiteindelijk geparste pagina, ziet deze er precies zo uit als in jouw voorbeeld. Die code werkt goed als ik deze direct gebruik, ook in mijn omgebouwde code. Aargh ik zit er zo dichtbij en dan werkt het op zo'n flauwe manier niet

[ Voor 198% gewijzigd door Kaastosti op 12-05-2005 17:52 ]

[Kaastosti]

Nog mensen met een suggestie? Ik heb weer een aantal manier van schrijven geprobeerd, maar bovenstaand probleem blijft.

[T-MOB]

In bovenstaande PHP mist een punt-komma op regel 3 achter de )

Tip: gebruik de javascript console van Firefox als je met JS bezig bent, geeft doorgaans vrij nuttige debugingformatie...

edit---

En nog een tip, gebruik verschillende quotes voor javascript en PHP. Allemaal geescapte quotes maakt het er niet leesbaarder op:

PHP:

$poortValues = 'poortValues = new Array("80","21","22");';

[ Voor 38% gewijzigd door T-MOB op 13-05-2005 11:32 ]