Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [HTML][JavaScript]Zależne pola select - jak ukryć niepotrzebne
krzesik
post 8.08.2019, 13:03:46
Post #1





Grupa: Zarejestrowani
Postów: 412
Pomógł: 1
Dołączył: 25.08.2012

Ostrzeżenie: (0%)
-----


Witam, mam problem jak w temacie
Wybieram element z pierwszego selecta, w zależności od wyboru pokazuje mi zawartość w drugim, wybieram w drugim pokazuje wybrane w trzecim.
Może być sytuacja że wybieram w pierwszym i na tym koniec, podobnie w drugim.Jak pokazzywać selekty w razie potrzeby?


  1. <form method="post" action="" name="tripleplay" >
  2. ........
  3. <label for="Select2">Rodzaj </label>
  4. <select name='List1' onchange="fillSelect(this.value,this.form['List2'])" class="form-control">
  5. <option selected>Wybierz rodzaj</option>
  6. </select>
  7. </div>
  8. <div class="form-group" >
  9. <label for="Select2">Dane dodatkowe</label>
  10. <select name='List2' onchange="fillSelect(this.value,this.form['List3'])" class="form-control">
  11. <option selected></option>
  12. </select>
  13. </div>
  14. <div class="form-group" >
  15. <label for="Select3">Opcje</label>
  16. <select name='List3' onchange="getValue(this.value, this.form['List2'].value,this.form['List1'].value)" class="form-control">
  17. <option selected ></option>
  18. </select>
  19. </div>
  20. .......
  21. </form>
  22.  
  23.  
  24. <script type="text/javascript">
  25.  
  26. var categories = [];
  27. categories["startList"] = ["1","2","3"]
  28. categories["2"] = ["a","b","c","d","e","f","g"];
  29. categories["3"] = ["x","y"];
  30. categories["e"] = ["e1","e2","e3","e4","e5","e6","e7"];
  31.  
  32. var nLists = 3; // number of select lists in the set
  33.  
  34. function fillSelect(currCat,currList){
  35. var step = Number(currList.name.replace(/\D/g,""));
  36. for (i=step; i<nLists+1; i++) {
  37. document.forms['tripleplay']['List'+i].length = 1;
  38. document.forms['tripleplay']['List'+i].selectedIndex = 0;
  39. }
  40. var nCat = categories[currCat];
  41. for (each in nCat) {
  42. var nOption = document.createElement('option');
  43. var nData = document.createTextNode(nCat[each]);
  44. nOption.setAttribute('value',nCat[each]);
  45. nOption.appendChild(nData);
  46. currList.appendChild(nOption);
  47. }
  48. }
  49.  
  50. function getValue(L3, L2, L1) {
  51. alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3);
  52. }
  53.  
  54. function init() {
  55. fillSelect('startList',document.forms['tripleplay']['List1'])
  56. }
  57.  
  58. navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
  59.  
  60.  

Go to the top of the page
+Quote Post
trueblue
post 8.08.2019, 18:35:49
Post #2





Grupa: Zarejestrowani
Postów: 5 464
Pomógł: 1496
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Jeśli są jakieś wartości dla <select>, a dokładnie tworzące <option>, to włącz wyświetlanie tej listy i kolejnej, jeśli brak, to wyłącz.
Domyślnie wszystkie począwszy od drugiej wyłączone.
Wyłączanie poprzez style.display = 'none' lub nadawanie/odejmowanie klasy (https://developer.mozilla.org/pl/docs/Web/API/Element/classList).


--------------------
Go to the top of the page
+Quote Post
krzesik
post 10.08.2019, 07:58:41
Post #3





Grupa: Zarejestrowani
Postów: 412
Pomógł: 1
Dołączył: 25.08.2012

Ostrzeżenie: (0%)
-----


słabo się czuję w JS, moższ mi w tym pomóc?

mam teraz coś takiego, ale to coś mi dalej nie działa....

  1.  
  2. <script type="text/javascript">
  3. .......
  4. function getValue(L3, L2, L1) {
  5. alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3);
  6.  
  7. document.getElementById("mydiv2").style.display="none";
  8. document.getElementById("mydiv3").style.display="none";
  9.  
  10. if (L1 == "2") {
  11. document.getElementById("mydiv2").style.display="block";
  12. }
  13. if (L1 == "3") {
  14. document.getElementById("mydiv3").style.display="block";
  15.  
  16. }
  17. }
  18. ....................
  19.  
  20. <form method="post" action="" name="tripleplay" >
  21. ........
  22. <label for="Select2">Rodzaj </label>
  23. <select name='List1' onchange="fillSelect(this.value,this.form['List2'])" class="form-control">
  24. <option selected>Wybierz rodzaj</option>
  25. </select>
  26. </div>
  27. <div class="form-group" id="mydiv2" style="display:none">
  28. <label for="Select2">Dane dodatkowe</label>
  29. <select name='List2' onchange="fillSelect(this.value,this.form['List3'])" class="form-control">
  30. <option selected></option>
  31. </select>
  32. </div>
  33. <div class="form-group" id="mydiv3" style="display:none">
  34. <label for="Select3">Opcje</label>
  35. <select name='List3' onchange="getValue(this.value, this.form['List2'].value,this.form['List1'].value)" class="form-control">
  36. <option selected ></option>
  37. </select>
  38. </div>
  39. .......
  40. </form>
  41.  
  42.  
  43.  
Go to the top of the page
+Quote Post
trueblue
post 10.08.2019, 08:06:21
Post #4





Grupa: Zarejestrowani
Postów: 5 464
Pomógł: 1496
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Co ma pomóc funkcja podpięta w ostatnim <select>, będziesz wyłączał poprzednie listy?

Skoro wypełniasz w funkcji fillSelect wybraną listę, to wiesz w tym momencie czy ma elementy czy nie. Zależnie od tego wyłączasz i włączasz kolejne listy.


--------------------
Go to the top of the page
+Quote Post
krzesik
post 10.08.2019, 08:15:55
Post #5





Grupa: Zarejestrowani
Postów: 412
Pomógł: 1
Dołączył: 25.08.2012

Ostrzeżenie: (0%)
-----


Oczywiście że nie chcę wyłączać poprzednich wyborów, ale na tą chwilę widzę tylko pierwszy select i bez względu co wybieram za skarby narodów kolejne mi się nie pokazują........
Go to the top of the page
+Quote Post
trueblue
post 10.08.2019, 08:39:17
Post #6





Grupa: Zarejestrowani
Postów: 5 464
Pomógł: 1496
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


A które miejsce w Twoim kodzie odpowiada za pokazywanie kolejnych list?


--------------------
Go to the top of the page
+Quote Post
krzesik
post 10.08.2019, 09:35:53
Post #7





Grupa: Zarejestrowani
Postów: 412
Pomógł: 1
Dołączył: 25.08.2012

Ostrzeżenie: (0%)
-----


Tworzenie

  1. for (each in nCat) {
  2. var nOption = document.createElement('option');
  3. var nData = document.createTextNode(nCat[each]);
  4. nOption.setAttribute('value',nCat[each]);
  5. nOption.appendChild(nData);
  6. currList.appendChild(nOption);
  7. }


wyświetlanie
  1. function fillSelect(currCat,currList){
  2. var step = Number(currList.name.replace(/\D/g,""));
  3. for (i=step; i<nLists+1; i++) {
  4. document.forms['tripleplay']['List'+i].length = 1;
  5. document.forms['tripleplay']['List'+i].selectedIndex = 0;
  6. }


Ten post edytował krzesik 10.08.2019, 09:47:32
Go to the top of the page
+Quote Post
trueblue
post 10.08.2019, 09:58:29
Post #8





Grupa: Zarejestrowani
Postów: 5 464
Pomógł: 1496
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Pokazywanie - zmiana styli, nie tworzenie. Gdzie jest ten fragment? Jak znajdziesz, to pomyśl czy w dobrym miejscu


--------------------
Go to the top of the page
+Quote Post
krzesik
post 10.08.2019, 11:30:50
Post #9





Grupa: Zarejestrowani
Postów: 412
Pomógł: 1
Dołączył: 25.08.2012

Ostrzeżenie: (0%)
-----


w tym miejscu generujemy wartości dla option
  1. function fillSelect(currCat,currList){
  2. var step = Number(currList.name.replace(/\D/g,""));
  3. for (i=step; i<nLists+1; i++) {
  4. document.forms['tripleplay']['List'+i].length = 1;
  5. document.forms['tripleplay']['List'+i].selectedIndex = 0;
  6. }


zmiana styli jest tu:

  1. function getValue(L3, L2, L1) {
  2. alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3);
  3.  
  4. document.getElementById("mydiv2").style.display="none";
  5. document.getElementById("mydiv3").style.display="none";
  6.  
  7. if (L1 == "2") {
  8. document.getElementById("mydiv2").style.display="block";
  9. }
  10. if (L1 == "3") {
  11. document.getElementById("mydiv3").style.display="block";
  12.  
  13. }


powinno być w fillSelect, ale tam mi nie działa........... :-(
Go to the top of the page
+Quote Post
trueblue
post 10.08.2019, 11:32:11
Post #10





Grupa: Zarejestrowani
Postów: 5 464
Pomógł: 1496
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


A obecnie działa?
Skoro jak już wiesz, że powinno być w fillSelect, to może pokażesz właśnie kod tej funkcji po modyfikacjach?


--------------------
Go to the top of the page
+Quote Post
krzesik
post 10.08.2019, 11:41:53
Post #11





Grupa: Zarejestrowani
Postów: 412
Pomógł: 1
Dołączył: 25.08.2012

Ostrzeżenie: (0%)
-----


  1. function fillSelect(currCat,currList){
  2. var step = Number(currList.name.replace(/\D/g,""));
  3. for (i=step; i<nLists+1; i++) {
  4. document.forms['tripleplay']['List'+i].length = 1;
  5. document.forms['tripleplay']['List'+i].selectedIndex = 0;
  6.  
  7. document.getElementById("mydiv2").style.display="none";
  8. document.getElementById("mydiv3").style.display="none";
  9.  
  10. if (L1 == "2") {
  11. document.getElementById("mydiv2").style.display="block";
  12. }
  13. if (L1 == "3") {
  14. document.getElementById("mydiv3").style.display="block";
  15.  
  16. }
  17.  
  18. var nCat = categories[currCat];
  19. for (each in nCat) {
  20. var nOption = document.createElement('option');
  21. var nData = document.createTextNode(nCat[each]);
  22. nOption.setAttribute('value',nCat[each]);
  23. nOption.appendChild(nData);
  24. currList.appendChild(nOption);
  25. }
  26. }
Go to the top of the page
+Quote Post
trueblue
post 10.08.2019, 11:46:15
Post #12





Grupa: Zarejestrowani
Postów: 5 464
Pomógł: 1496
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Napisałem w poście #2 i #4, że powinieneś sprawdzać czy są dane dla listy czy nie, jeśli są, to pokazywać następny <select>.
Gdzie w tym kodzie uzależniasz pokazywanie listy od zawartości poprzedniej?


--------------------
Go to the top of the page
+Quote Post
krzesik
post 10.08.2019, 11:52:02
Post #13





Grupa: Zarejestrowani
Postów: 412
Pomógł: 1
Dołączył: 25.08.2012

Ostrzeżenie: (0%)
-----


  1. if (!empty(document.forms['tripleplay']['List1'])) {
  2. document.getElementById("mydiv2").style.display="block";
  3. }
  4. if (!empty(document.forms['tripleplay']['List2'])) {
  5. document.getElementById("mydiv3").style.display="block";
  6.  
  7. }


zwariuje....
Go to the top of the page
+Quote Post
trueblue
post 10.08.2019, 11:55:49
Post #14





Grupa: Zarejestrowani
Postów: 5 464
Pomógł: 1496
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


empty w JavaScript?

W którym miejscu w kodzie wypełniasz listę?


--------------------
Go to the top of the page
+Quote Post
krzesik
post 10.08.2019, 12:00:39
Post #15





Grupa: Zarejestrowani
Postów: 412
Pomógł: 1
Dołączył: 25.08.2012

Ostrzeżenie: (0%)
-----


  1. for (each in nCat) {
  2. var nOption = document.createElement('option');
  3. var nData = document.createTextNode(nCat[each]);
  4. nOption.setAttribute('value',nCat[each]);
  5. nOption.appendChild(nData);
  6. currList.appendChild(nOption);
  7. }


pisałem na początku że jestem noga z JS
Go to the top of the page
+Quote Post
trueblue
post 10.08.2019, 12:32:32
Post #16





Grupa: Zarejestrowani
Postów: 5 464
Pomógł: 1496
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Tok postępowania nie ma związku z językiem programowania.

Tak. W tym fragmencie. Mając zmienną nCat wiesz czy ma w sobie jakieś elementy czy nie, bo jest tablicą. Jeśli tablica ma jakieś elementy, to włączasz pokazywanie tej listy, ale nie kolejnych. Domyślnie, czyli przed sprawdzeniem czy tablica jest pusta, a właściwie po prostu na zdarzenie change wyłączasz widoczność tej listy i następnych.

Czyli zmieniam listę1. Wyłączam widoczność lista2 i lista3. Uzupełniam zawartość lista2. Jeśli były dane do uzupełnienia, to włączam widoczność lista2.
Jeśli zmieniam listę2, to wyłączam widoczność lista3. Uzupełniam listę3, a jeśli były dane to włączam jej widoczność.


--------------------
Go to the top of the page
+Quote Post
krzesik
post 12.08.2019, 08:06:02
Post #17





Grupa: Zarejestrowani
Postów: 412
Pomógł: 1
Dołączył: 25.08.2012

Ostrzeżenie: (0%)
-----


Bardzo mi pomogły Twoje podpowiedzi, już mi to działa, ale mam jeszcze jedno pytanie czy jeśli zrobię to analogicznie to chciałbym aby po wybraniu odpowiedniej opcji pojawił mi się ukryty input.
wydaje mi się że zrobiłem dobrze, ale jednak efekt końcowy nie jest taki jaki oczekuję. Zerknij proszę

  1. for (each in nCat) {
  2. var nOption = document.createElement('option');
  3. var nData = document.createTextNode(nCat[each]);
  4. nOption.setAttribute('value',nCat[each]);
  5. nOption.appendChild(nData);
  6. currList.appendChild(nOption);
  7.  
  8. if ((document.forms['tripleplay']['List1'].value=='2') || (document.forms['tripleplay']['List1'].value=='3'))
  9. {
  10. document.getElementById("mydiv2").style.display="block";
  11. }
  12. else
  13. {
  14. document.getElementById("mydiv2").style.display="none";
  15. }
  16.  
  17. if (document.forms['tripleplay']['List1'].value!='' && document.forms['tripleplay']['List2'].value=='6')
  18. {
  19. document.getElementById("mydiv2").style.display="block";
  20. document.getElementById("mydiv3").style.display="block";
  21. }
  22. else
  23. {
  24. document.getElementById("mydiv3").style.display="none";
  25. }
  26. if (document.forms['tripleplay']['List2'].value=='3')
  27. {
  28. document.getElementById("mydiv4").style.display="block";
  29. }
  30. else
  31. {
  32. document.getElementById("mydiv4").style.display="none";
  33. }
  34. }
  35.  
  36.  
  37. ....................
  38.  
  39. <div id="mydiv4" class="form-group" style="display:none">
  40. <label for="uwagi">Numer </label>
  41. <input name="nr_probki" type="text" id="uwagi" value="123456" readonly class="form-control">
  42. </div>
  43.  


dziękuję za cierpliwość i pomoc. jest już OK

Ten post edytował krzesik 11.08.2019, 17:36:12
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 20.08.2019 - 02:26