JS/JQuery - Anzeige ändern je Selectbox -> Werte deaktivieren

Dieses Thema im Forum "Webentwicklung" wurde erstellt von GaYlORd, 4. November 2013 .

  1. 4. November 2013
    Hi Leute,

    folgendes Beispiel-Szenario:
    Ich habe 4 Auswahllisten mit unterschiedlichen 3 unterschiedlichen Werten, die aber alle abhängig voneinander sind. Wähle ich in Auswahlbox 1 etwas aus, werden alle Optionen in den anderen Auswahllisten, die nicht mit der aktuelle Auswahl kompatibel sind, deaktiviert. Die Optionen der aktuellen Box sollen dabei alle aktiv bleiben, falls man sich verwählt hat.
    Darunter sind verschiedene Divs-die ebenfalls je nach Auswahl angezeigt werden.

    Ich habe es schon erstellt, allerdings läuft es noch nicht so wie ich das möchte. Vor allem bei der deativieren der Optionen macht es Probleme.

    Mein bisheriger Code:

    HTML:
    <form id="auswahl">
    <select name="c-s" class="c-s">
     <option class="all" value="all">Alles Zeigen</option>
     <option value="a1" class="a1 ha us">Alternative 1</option> 
     <option value="a2" class="a2 pe ha">Alternative 2</option>
     <option value="a3" class="a3 us">Alternative 3</option>
    </select>
    <select name="c-p" class="c-p">
     <option class="all" value="all">Alles Zeigen</option> 
     <option value="ha" class="ha a1 a2">Hans</option>
     <option value="pe" class="pe a2">Peter</option>
     <option value="us" class="us a1 a3">Uschi</option>
    </select>
    <div class="divcontent a1 pe">lalelu</div>
    <div class="divcontent a2 pe ha">hans dei muada</div>
    <div class="divcontent a3 us">aksldlja</div>
    </div>
    
    Wähle ich Peter, wird in der anderen Liste A1 und A2 deaktiviert und nur noch der div "hans dei muada" und "lalelu" angezeigt.
    Wähle ich Peter, wird in der anderen Liste Alternative 1 und Alternative 2 deaktiviert und nur noch "lalelu" angezeigt.
    Wähle ich Peter und Alternative 2 wird ebenfalls nur noch box "hans dei muada" angezeigt.

    Mein JS:
    PHP:
    $( "#auswahlselect" ). each (function(){
        $(
    this ). change (function(){
            var 
    all  "" ;
            
    wert  = new Array();
            
    wert [ 0 ] =  "." +$( ".c-s" ). val ();
            if(
    wert [ 0 ] ==  ".all" )
                
    wert [ 0 ] =  "" ;
            
    wert [ 1 ] =  "." +$( ".c-p" ). val ();
            if(
    wert [ 1 ] ==  ".all" )
                
    wert [ 1 ] =  "" ;

            var 
    sel  = $( this ). attr ( "name" );
            for(var 
    i = 0 ; i < 2 ; i ++){
                if(
    wert [ i ] !=  "" )
                    
    all  all + wert [ i ];
            }
            $(
    all ). show ();
            $(
    ".divcontent" ). not ( all ). hide ();
        });
    });
    Das Anzeigen der divs klappt, wie es soll. Aber halt die Auswahllisten nur bedingt gut. Es fehlt:
    • Optionen aktueller Liste sollen wählbar bleiben (in Abhängigkeit aktueller Auswahl)

    Ist mein Lösungsansatz überhaupt sinnvoll oder kann man das eleganter lösen?

    Danke schonmal!

    Schöne Grüße
    gl
     
  2. 4. November 2013
    AW: JS/JQuery - Anzeige ändern je Selectbox -> Werte deaktivieren

    so meinst du?

    HTML:
    <form id="auswahlselect">
     <select name="c-s" class="c-s">
     <option class="all" value="all">
     Alles Zeigen
     </option>
     <option value="a1" class="a1 ha us">
     Alternative 1
     </option>
     <option value="a2" class="a2 pe ha">
     Alternative 2
     </option>
     <option value="a3" class="a3 us">
     Alternative 3
     </option>
     </select>
     <select name="c-p" class="c-p">
     <option class="all" value="all">
     Alles Zeigen
     </option>
     <option value="ha" class="ha a1 a2">
     Hans
     </option>
     <option value="pe" class="pe a2">
     Peter
     </option>
     <option value="us" class="us a1 a3">
     Uschi
     </option>
     </select>
    </form>
    <div class="divcontent a1 pe">
     lalelu
    </div>
    <div class="divcontent a2 pe ha">
     hans dei muada
    </div>
    <div class="divcontent a3 us">
     aksldlja
    </div>
    
    <script>
    var wert = new Array();
    function setContent (){
     all = "";
     $(wert).each(function(i, el){
     if(el != undefined && el != "")
     all = all+'.'+el;
     });
     $('.divcontent').show();
     if(all.length){
     $(".divcontent").not(all).hide();
     }
    }
    $("#auswahlselect select").each(function(i, el){
     $(el).change(function(){
     $("#auswahlselect select option").attr('disabled','disabled');
     $(this).find('option').removeAttr('disabled');
     wert[i] = $(this).val()!='all' ? $(this).val() : '';
     optEl = $(this).attr('class') != 'c-s' ? $('.c-s option') : $('.c-p option');
     optEl.each(function(o, elO){
     if(wert[i] == '' || $(elO).hasClass('all') || $(elO).hasClass(wert[i])){
     $(elO).removeAttr('disabled');
     }
     });
     setContent();
     });
    });
    setContent();
    </script>
    
     
    1 Person gefällt das.
  3. 5. November 2013
    AW: JS/JQuery - Anzeige ändern je Selectbox -> Werte deaktivieren

    Jaa =)
    Schaut gut aus - Danke!!

    Kleine Frage:
    Wenn ich mehr Auswahlfelder als die beiden habe, muss ich dann für alle Kombinationen aus Auswahlfeldern das If-Else reinmachen oder gibt es da wieder eine andere Möglichkeit?
    PHP:
    optEl  = $( this ). attr ( 'class' ) !=  'c-s'  ? $( '.c-s option' ) : $( '.c-p option' );
    optEl  = $( this ). attr ( 'class' ) !=  'c-t'  ? $( '.c-t option' ) : $( '.c-p option' );
    optEl  = $( this ). attr ( 'class' ) !=  'c-s'  ? $( '.c-s option' ) : $( '.c-t option' );
    Danke
    Gruß
    gl
     
  4. 5. November 2013
    AW: JS/JQuery - Anzeige ändern je Selectbox -> Werte deaktivieren

    Nit-picking:
    nit-picking
     
  5. 14. November 2013
    Zuletzt bearbeitet: 14. November 2013
    AW: JS/JQuery - Anzeige ändern je Selectbox -> Werte deaktivieren

    Wie umfangreich soll dein Projekt den werden?

    Wenn es so "klein" bleibt, kannst du die Lösung mit den Klassen beibehalten, aber sollte es mal umfangreicher werden, würde es sich empfehlen wenn du ein Objekt anlegst. Lässt sich später dann leichter verwalten.

    Objekt:
    PHP:
    var  cp  = {
            
    peter  : {
                
    prop1  'pe' ,
                
    prop2  'a2'
            
    },
            
    hans  : {
                
    prop1  'ha' ,
                
    prop2  'a1' ,
                
    prop3  'a2'
            
    }
        }
    Theoretisch könntest du dann dem Script sagen, anhand des Objektes soll es dann das <select> Element mit den dem entsprechenen <option> Elementen füllen.

    Gruß Hulky
     
    1 Person gefällt das.
  6. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.