ilch Forum » Allgemein » HTML, PHP, SQL,... » dropdown erweitern

Geschlossen
  1. Di. 07.10.2008 23:19 Uhr #1
    User Pic
    SteKu Mitglied
    Registriert seit
    25.03.2007
    Beiträge
    259
    Beitragswertungen
    2 Beitragspunkte
    Hallo,

    zu meinem problem ich möchte gern das je nach auswahl in einem dropdown ein weiteres dropdown der auswahl entsprechendes erscheint.

    Hab hier ein beispiel mit "radiobutton" aber das hilft mir nix, weiß nicht weiter. 

    <form>
      <input type="radio" name="gruppe" value="papier" onclick="getElementById('papier').style.display='block';getElementById('holz').style.display='none';">Papier
      
	  <input type="radio" name="gruppe" value="holz" onclick="getElementById('papier').style.display='none';getElementById('holz').style.display='block';">Holz	  
	  
      <select name="papier" id="papier" size="1" style="display: none;">
              <option value="papier1">Hygiene</option>
              <option value="papier2">Verpackung</option>
      </select>
      <select name="holz" id="holz" size="1" style="display: none;">
              <option value="holz1">holz1</option>
              <option value="holz2">holz2</option>
      </select>
</form>


    Hoffe könnt mir helfen.

    LG
    SteKu
    Wer Rechtschreibfehler findet darf sie behalten.
    0 Mitglieder finden den Beitrag gut.
  2. Mi. 08.10.2008 00:30 Uhr #2
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    <script>
var showNow = 0;
function showNextSelect(id) {
    if (id != 0) {
        if (showNow != 0) {
            document.getElementById(showNow).style.display = 'none';
        }
        document.getElementById(id).style.display = '';
        showNow = id;
    } else {
        document.getElementById('globselect').value = showNow;
    }
}
</script>
<form>
      <select id="globselect" onchange="showNextSelect(this.value);"><option value="0">Bitte w&auml;hlen</option><option value="holz">Holz</option><option value="papier">Papier</option></select>
      <select name="papier" id="papier" size="1" style="display: none;">
              <option value="papier1">Hygiene</option>
              <option value="papier2">Verpackung</option>
      </select>
      <select name="holz" id="holz" size="1" style="display: none;">
              <option value="holz1">holz1</option>
              <option value="holz2">holz2</option>
      </select>
</form>


    So im Prinzip sollte das funktionieren.


    Zuletzt modifiziert von Mairu am 08.10.2008 - 00:40:29
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    0 Mitglieder finden den Beitrag gut.
  3. Mi. 08.10.2008 01:01 Uhr #3
    User Pic
    SteKu Mitglied
    Registriert seit
    25.03.2007
    Beiträge
    259
    Beitragswertungen
    2 Beitragspunkte
    Danke das klappt schon mal supper das prinzip ist jetzt klar, wie mach ich jetzt das das erste erweiterte dropdown sichtbar bleibt wenn ich es auf ein drittes viertes .... erweitere. Bei meinem beispiel verschwindet das erschiene wieder. 

    <script> 
var showNow = 0; 
function showNextSelect(id) { 
    if (id != 0) { 
        if (showNow != 0) { 
            document.getElementById(showNow).style.display = 'none'; 
        } 
        document.getElementById(id).style.display = ''; 
        showNow = id; 
    } else { 
        document.getElementById('globselect').value = showNow; 
    } 
} 
</script> 
<form>
            
    <p><select id="globselect" onchange="showNextSelect(this.value);">
        <option value="0">Bitte wählen</option>
        <option value="holz">Holz</option>
        <option value="papier">Papier</option>
</select> 
     
	  <select name="papier" id="papier" size="1"style="display: none;">
        <option value="papier1">Hygiene</option>
        <option value="papier2">Verpackung</option>
      </select>
	   
      <select name="holz" id="holz" size="1" onchange="showNextSelect(this.value);" style="display: none;">
        <option value="holz1">holz1</option>
        <option value="holz2">holz2</option>
      </select> 
	  
	  </p>
    <p><select name="holz1" id="holz1" size="1" style="display: none;">
        <option value="holz11">holz11</option>
        <option value="holz22">holz22</option>
      </select>
	  
	  <select name="holz2" id="holz2" size="1" style="display: none;">
        <option value="holz111">holz111</option>
        <option value="holz222">holz222</option>
      </select>
</p>
</form>
    Wer Rechtschreibfehler findet darf sie behalten.
    0 Mitglieder finden den Beitrag gut.
  4. Mi. 08.10.2008 09:45 Uhr #4
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    Naja die z.Z. gewählte Option wird in einer globalen Variable gespeichert wie du siehst, ist nicht die beste Variante aber sie funktioniert.

    Wenn du mehrere solche Dropdowns willst, dann machen wir das besser anders. 

    <script>
function recDontShow(elid) {
    var el = document.getElementById(elid);
    el.style.display = 'none';
    var iel = document.getElementById(el.value);
    if (iel != undefined) {
        recDontShow(el.value);
    }
}
function recShow(elid) {
    var el = document.getElementById(elid);
    el.style.display = '';
    var iel = document.getElementById(el.value);
    if (iel != undefined) {
        recShow(el.value);
    }
}
function showNextSelect(id, parent) { 
    var select = document.getElementById(id);
    var showNow = parent.getAttribute('active');
    if (id != 0) {
        if (showNow != null && showNow != 0) {
            recDontShow(showNow); 
        }   
        recShow(parent.id); 
        parent.setAttribute('active', id); 
    } else {
        parent.value = showNow; 
    } 
} 
</script> 
<form>
            
    <p><select id="globselect" onchange="showNextSelect(this.value, this);">
        <option value="0">Bitte w&auml;hlen</option>
        <option value="holz">Holz</option>
        <option value="papier">Papier</option>
</select> 
     
      <select parent="globselect" name="papier" id="papier" size="1"style="display: none;">
        <option value="papier1">Hygiene</option>
        <option value="papier2">Verpackung</option>
      </select>
       
      <select parent="globselect" name="holz" id="holz" size="1" onchange="showNextSelect(this.value, this);" style="display: none;">
        <option value="0">Bitte w&auml;hlen</option>
        <option value="holz1">holz1</option>
        <option value="holz2">holz2</option>
      </select> 
      
      </p>
    <p><select parent="holz" name="holz1" id="holz1" size="1" style="display: none;">
        <option value="holz11">holz11</option>
        <option value="holz22">holz22</option>
      </select>
      
      <select parent="holz" name="holz2" id="holz2" size="1" style="display: none;">
        <option value="holz111">holz111</option>
        <option value="holz222">holz222</option>
      </select>
</p>
</form>


    Puh da muss ganz schön viel beachtet werden, ich hoffe dass ich nichts vergessen hab, ich hoffe du siehst, was du beachten musst.
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    0 Mitglieder finden den Beitrag gut.
  5. Mi. 08.10.2008 13:45 Uhr #5
    User Pic
    SteKu Mitglied
    Registriert seit
    25.03.2007
    Beiträge
    259
    Beitragswertungen
    2 Beitragspunkte
    ich danke dir funktioniert alles bestens
    echt spitze, darfst dir wiedermal ein
    gesperrtes Bild
    eintragen

    LG
    SteKu
    Wer Rechtschreibfehler findet darf sie behalten.
    0 Mitglieder finden den Beitrag gut.
  6. Do. 16.10.2008 00:22 Uhr #6
    User Pic
    SteKu Mitglied
    Registriert seit
    25.03.2007
    Beiträge
    259
    Beitragswertungen
    2 Beitragspunkte
    so das klappt zwar alles wunderbar, aber nun möchte ich gern das vor dem "neu" erscheinentem menü noch etwas steht.

    Beispiel:
    Was für Matrieal: <dropdown>
    ->Was für Farbe: <erscheinentes dropdown>

    Ich vermute das es mit div funktioniert nur wie das jetzt im zusammenhang mit dem dropdown funktioniert hmm ...

    Hoffe ihr könnt mir da noch mal helfen.

    Gruß
    Wer Rechtschreibfehler findet darf sie behalten.
    0 Mitglieder finden den Beitrag gut.
  7. Do. 16.10.2008 10:18 Uhr #7
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    Naja kannst du mit einem div, oder auch jeden anderen Element machen. Also z.B. würde auch span oder keine Ahnung font, b, i usw. gehen aber div oder span sind zu bevorzugen, in dem Fall nehm ich mal Span, also du schreibst immer direkt vor das Select 
    <span id="IDVOMSELECT_title" style="display:none;">der Titel</span>
    also z.B. holz_title

    Dann noch die show Methoden anpassen. 

    function recDontShow(elid) {
    var el = document.getElementById(elid);
    var el_title = document.getElementById(elid+'_title');
    if (el_title) { el_title.style.display = 'none'; }
    el.style.display = 'none';
    var iel = document.getElementById(el.value);
    if (iel != undefined) {
        recDontShow(el.value);
    }
}
function recShow(elid) {
    var el = document.getElementById(elid);
    var el_title = document.getElementById(elid+'_title');
    if (el_title) { el_title.style.display = ''; }
    el.style.display = '';
    var iel = document.getElementById(el.value);
    if (iel != undefined) {
        recShow(el.value);
    }
}



    Bei noch mehr zusätzlichen Elementen, sollte man aber lieber alle in einen Container stecken und dann nur diesen verstecken.


    Zuletzt modifiziert von Mairu am 16.10.2008 - 10:20:09
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten