2012-03-28 5 views
0

Ich suche nach der besten Lösung für dieses Problem. Ich habe ein einfaches logisches Problem. Es gibt 2 Auswahlelemente, , Größe und Farbe. Ich möchte sie abhängig machen, auf Daten (jetzt ist es Beispieldaten, aber später wird es aus der Datenbank sein) - Größe wird entscheiden, welche Farboptionen für den Kunden sichtbar sein werden (nicht notwendige ausblenden).Jquery Formular onchange Auswahl Werte ändern

Das erste Problem ist, dass, wenn ich ändern Ereignis, und ich möchte das standardmäßig angezeigte Element auf Dokument bereit, es ist immer noch sichtbar (ich müsste die Farbe in andere als öffnen Dropdown-Liste wieder ändern und es wird nicht sichtbar sein dann).

Zweitens suche ich nach der flexibelsten Lösung, da ich Zweifel an meiner habe. Hier ist der Code:

 var rozmiar = new Array("S", "M", "L", "XL", "XXL"); 
    var kolor = new Array("Czerwony", "Niebieski", "Zielony", "Biały", "Czarny"); 
    var opcje = new Array(rozmiar, kolor); 

     $(document).ready(function(){ 
     $('.form1').change(function(){ 
       $('.form2 option').show(); 

       var selectSelector = function(z){ 
        selectSelector = $('select.form2 option[value='+kolor[z]+']').hide(); 
       }; 

       wybranyRozmiar = $(this).val(); 
        if(wybranyRozmiar == rozmiar[0]){ 
         selectSelector(0); 
        } 
        if(wybranyRozmiar == rozmiar[1]){ 
         selectSelector(1); 
        } 
        if(wybranyRozmiar == rozmiar[2]){ 
         selectSelector(2); 
        } 
        if(wybranyRozmiar == rozmiar[3]){ 
         selectSelector(3); 
        } 
        if(wybranyRozmiar == rozmiar[4]){ 
         selectSelector(4); 
        } 
      }); 
     }); 
+0

würden Sie einige Ihrer Code etwas dagegen zu teilen? – codef0rmer

+0

Just done, ich denke auch, wie man variable aus meinem Auswahl-Selektor machen, um es kürzer zu machen – Malyo

+0

@Malyo, Bitte nur relevanten Code auf das Problem, nicht alles – Starx

Antwort

1

Ich beantworte den einzigen Teil, den ich verstehe.

Statt mehr if Aussagen verwenden, können Sie Schalter

switch(selectsize) { 
    case rozmiar[1]: 
     $('select.form2 option[value='+color[2]+']').hide(); 
     break; 
    //case <another>" 
     //break; 
} 
+0

Ich dachte darüber nach, aber ist wirklich schneller wechseln? – Malyo

+1

@Malyo, Bitte beachten Sie [dies] (http://StackOverflow.com/A/2923007/295264) dafür. ;) – Starx

+0

Kann ich auch einen Vergleich innerhalb des Switches verwenden? Wie im Fall (wybranyRozmiar == rozmiar [0]) - da es für meinen Code entscheidend ist – Malyo

0

Dies ist verwenden, was ich verstand, was getan werden muss. Wählen Sie die entsprechende Option aus .form2 auf der Grundlage des ausgewählten Optionsindex in .form1.

$('select.form1').change(function (i) { 
    var selectedIndex = $('select.form1 option:selected').index(); 
    $('select.form2 option:eq(' + selectedIndex + ')').attr('selected', 'selected'); 
}); 

D3m0: http://jsbin.com/azilow

Verwandte Themen