Dynamiczne tworzenie trzech Select

Question

Cześć, potrzebuję stworzyć prosty skrypt działający na zasadzie: https://bootsnipp.com/snippets/xrQOB

Nie potrafię sobie poradzić z działającym skryptem z trzema zależnymi od siebie polami Select.

Przykład: Po wybraniu opcji Owoce, chciałbym aby pokazywały mi się "Gruszki, Jabłka". Po wybraniu "Jabłka", chciałbym aby otworzyły mi się Kalorie "100kcal, 200kcal". Siedzę nad modyfikacją tego skryptu parę godzin i nie jestem w stanie sobie z nim poradzić. Będę wdzięczny za wszelką pomoc.

Select 1

Opcje: Owoce, Warzywa

Select 2

Opcje: Gruszki, Jabłka

Select 3

Opcje 100kcal, 200kcal

Comments

najlepiej wrzuć ten swój kod, będzie łatwiej dojść do tego co jest nie tak

Answer 1

Musisz najpierw ustalić które dane mają pasować do siebie. Można to machnąć np. w bazie relacyjnej. Następnie blokujesz wstępnie drugi i trzeci select. Po wybraniu wartości z pierwszego "robisz Ajaxa" do serwera (do bazy) przesyłając wybraną wartość i pobierasz względem niej dane do 2 inputa. Po otrzymaniu danych u klienta odlokowujesz drugi select i powtarzasz operację. Ewentualnie od razu po wyborze pierwszego selecta pobrać dane na 2 kolejne, to już zależy od logiki aplikacji.

Answer 2

function populate(s1,s2,s3){
	var s1 = document.getElementById(s1);
	var s2 = document.getElementById(s2);
	var s3 = document.getElementById(s3);
	s2.innerHTML = "";
    s3.innerHTML = "";
	if(s1.value == "2018"){
		var optionArray = ["24|24","36|36","48|max 84mc"];
		var optionArrays = ["19|19%","20|20 %","21|21%"];
	} else if(s1.value == "2017"){
		var optionArray = ["24|24","36|36","48|max 72mc"];
		var optionArrays = ["19|19%","20|20 %","21|21%"];
	} else if(s1.value == "2016"){
		var optionArray = ["24|24","36|36","48|max 60mc"];
		var optionArrays = ["19|19%","20|20 %","21|21%"];
	}
	for(var option in optionArray){
		var pair = optionArray[option].split("|");
		var newOption = document.createElement("option");
		newOption.value = pair[0];
		newOption.innerHTML = pair[1];
		s2.options.add(newOption);
//        $('.selectpicker').selectpicker('refresh');
	}

	for(var option in optionArrays){
		var pair = optionArrays[option].split("|");
		var newOption = document.createElement("option");
		newOption.value = pair[0];
		newOption.innerHTML = pair[1];
		s3.options.add(newOption);
//        $('.selectpicker').selectpicker('refresh');
	}
}
    
function rv(s2, s3){
	var s2 = document.getElementById(s2);
	var s3 = document.getElementById(s3);

	if(s2.value == "36"){
        
        if(s3.length >= 0){
                for(let i=0 ; i< s3.length ; i++) {
                s3.remove(s3[i-1]);
            }
                                s3.options[0].text = "1%";
                                s3.options[0].value = "1";
        }

		var optionArrays = ["2|2%","3|3%","4|4%","5|5%","6|6%","7|7%","8|8%","9|9%","10|10%"];

	} else if(s2.value == "48"){
		var optionArrays = ["1|wybrano 48"];

	} else if(s2.value == "60"){
		var optionArrays = ["1|wybrano 60"];
	}
    
	for(var option in optionArrays){
        
		var pair = optionArrays[option].split("|");
		var newOption = document.createElement("option");
		newOption.value = pair[0];
		newOption.innerHTML = pair[1];
		s3.options.add(newOption);
//        $('.selectpicker').selectpicker('refresh');
	}  
}

Rok produkcji:
<select class="" id="slct1" name="slct1" onchange="populate(this.id,'slct2','slct3')">
  <option value="">---</option>
  <option value="2018">2018</option>
  <option value="2017">2017</option>
  <option value="2016">2016</option>
</select>
<hr />
Okres finansowania:
<select class="" id="slct2" name="slct2" onchange="rv(this.id, 'slct3')"></select>
<hr />
<hr />
Wykup:
<select class="" id="slct3" name="slct3"></select>

1. Wybierając rok produkcji pojazdu powinny uaktywnić się dwa Selecty: Okres finansowania i Wykup. Tutaj jest OK.

2. Po zmianie Selecta2 na okres 36 miesięcy, powinno zmienić się pole wyboru Select3 na 1,2,3,4,5,6,7,8, 9, 10 itp..%. Tutaj jest prawie OK.

3. Po wyborze ponownie Selecta2 i zmianie na 24 miesiące w Select3 powinny pojawiać się ponownie dane zaczynające się od 19%. I tutaj nie mogę sobie poradzić :(

4. I tak w kółko. Zmiana Select2 na 24 miesiące = Select3 zaczynający się od 19%. Zmiana Select2 na 36, 48 lub 60 miesięcy = Select3 zaczynający się od 1%.

 

Mam nadzieję, że w miarę jasno wyjaśniłem. Siedzę nad tym kolejne godziny i w końcu sam już nie wiem jak to ugryźć. Może ktoś będzie w stanie pomóc :)