Jquery form onchange select values changing

Question

I'm looking for best solution to this problem. I have a simple shop logical problem. There are 2 select elements, size and color. I want to make them dependent, on data (now it's example data, but later it's gonna be from database) - size will decide which color options will be visible for customer (hiding not necessary ones).

First problem is that when i make change event, and i wanna hide the default shown element on document ready, it's still visible (i'd have to change color to different than open dropdown again and it won't be visible then).

Second is that i'm looking for most flexible solution, since i have doubts about mine. Here's the 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);
                    }
            });
        });

Just done, I'm also thinking how to make variable out of my select selector, to make it shorter — Malyo, Mar 28 '12 at 08:30
@Malyo, Please post only relevant code to the problem, not everything — Starx, Mar 28 '12 at 08:35
@Malyo, I think you need to break down your question and post as different questions. — Starx, Mar 28 '12 at 08:44

score 1 · Answer 1 · answered Mar 28 '12 at 08:38

1

I am answering the only part I understand.

Instead of using multiple if statements you can use switch

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

answered Mar 28 '12 at 08:38

Starx

72,283
42
174
253

I was considering it, but is switch really faster? – Malyo Mar 28 '12 at 08:42
1

@Malyo, Please refer to [this](http://stackoverflow.com/a/2923007/295264) for that. ;) – Starx Mar 28 '12 at 08:43
Altho can i use comparision inside switch ? Like case (wybranyRozmiar == rozmiar[0]) - since its crucial to my code – Malyo Mar 28 '12 at 08:53
@Malyo, I will not recommend doing that, as semantically it would be wrong. Switch are made to handle a case of multiple version on one expression. – Starx Mar 28 '12 at 08:55

score 0 · Answer 2 · answered Mar 28 '12 at 10:51

This is what I understood that needs to be done. Select the corresponding option from .form2 on the basis of selected option's index 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

Jquery form onchange select values changing

2 Answers2