ukrywanie pól w zależności od select

0

Witam, mam problem potrzebuję ukryć kilka pól w zależności od wyboru w "select", to chodzi ale przy ładowaniu strony z zaznaczonym wyborem to nie działa poniżej daję kod strony, co mam zrobić/zmienić żeby zadziałało?

<html>
<head>
<title>test</title>

<script type="text/javascript">
function pokaz(obj)
{
    document.getElementById(obj).style.display = '';
}
function ukryj(obj)
{
    document.getElementById(obj).style.display = 'none';
}
</script>
</head>
<body onload="pokaz(obj);ukryj(obj);">
<select name="KRAJEW" onchange="if(this.selectedIndex > 1) { pokaz('dost_reczn1'); } else { ukryj('dost_reczn1'); } ">
<option  value="0">--Country--</option>
<option  selected value="1">Australia</option>
<option  value="2">England</option>
<option  value="3">Germany</option>
<option  value="4">USA</option>
</select><br />
<table>
<tr><td CLASS=tytul-rl>pole1</td><td id="dost_reczn1">11111</td></tr>
<tr><td CLASS=tytul-rl>pole2</td><td id="dost_reczn2">22222</td></tr>
</table>
</body>
</html>
1

to chodzi ale przy ładowaniu strony z zaznaczonym wyborem to nie działa

  1. to chodzi – ?
  2. Co dokładnie nie działa? Jak się objawia to niedziałanie?

UPDATE:

<body onload="pokaz(obj);ukryj(obj);">

Ta linijka wykona funkcje pokaz oraz ukryj naraz po załadowaniu się strony UPDATE2: z nieistniejącym argumentem. Czy na pewno o to Ci chodziło, by były wykonywane naraz (tzn. nie dokładnie "naraz", ale dla użytkownika tak to będzie wyglądać)? Pytam, bo ich definicje są sobie przeciwstawne.

0

Niezależnie od tego co dam do <body> i w jakiej kolejności (samo <body> też nie działa) nie chce to chodzić przy wczytaniu strony, potem jak wybieram ręcznie, wszystko ładnie chodzi.
Zależy mi na tym żeby również przy wczytaniu strony ukrywało odpowiednie elementy.

1

Bo powinienes uzyc CSSa i manipulowac klasami a nie stylami bezposrednio. Tj. to wykonalne i nawet nie trudne w samym jsie ale nie tedy droga

0

Które elementy powinny zostać ukryte przy wczytaniu strony? Obecnie z kodu to nie wynika.

3
<html>
<head>
<title>test</title>

<script type="text/javascript">
function pokaz(obj)
{
    document.getElementById(obj).style.display = '';
}
function ukryj(obj)
{
    document.getElementById(obj).style.display = 'none';
}
</script>
</head>
<body onload="ukryj('dost_reczn1');">
<select name="KRAJEW" onchange="if(this.selectedIndex > 1) { pokaz('dost_reczn1'); } else { ukryj('dost_reczn1'); } ">
<option  value="0">--Country--</option>
<option  selected value="1">Australia</option>
<option  value="2">England</option>
<option  value="3">Germany</option>
<option  value="4">USA</option>
</select><br />
<table>
<tr><td CLASS=tytul-rl>pole1</td><td id="dost_reczn1">11111</td></tr>
<tr><td CLASS=tytul-rl>pole2</td><td id="dost_reczn2">22222</td></tr>
</table>
</body>
</html>
0

Działa, ale dla specyficznego stanu, ale jeżeli zmienię:

<option  selected value="1">Australia</option>

na:

<option selected value="3">Germany</option>

to niestety już nie działa prawidłowo :(

1
<html>
<head>
<title>test</title>

<script type="text/javascript">
let selected;

function setSelected(obj) {
  const e = document.getElementsByName("KRAJEW")[0];
  selected = e.selectedIndex;
  document.getElementById(obj).style.display = 'none';
}

function toggle(obj)
{
  const e = document.getElementsByName("KRAJEW")[0];
  if(e.selectedIndex != selected) {
    document.getElementById(obj).style.display = '';
  } else {
    document.getElementById(obj).style.display = 'none';
  }
}
</script>
</head>
<body onload="setSelected('dost_reczn1');">
<select name="KRAJEW" onchange="toggle('dost_reczn1');">
<option  value="0">--Country--</option>
<option  value="1">Australia</option>
<option  value="2">England</option>
<option  selected value="3">Germany</option>
<option  value="4">USA</option>
</select><br />
<table>
<tr><td CLASS=tytul-rl>pole1</td><td id="dost_reczn1">11111</td></tr>
<tr><td CLASS=tytul-rl>pole2</td><td id="dost_reczn2">22222</td></tr>
</table>
</body>
</html>
0

Teraz ukrywa przy każdym wyborze który jest wczytany przy starcie strony niestety nie o to chodzi, ma ukrywać według konkretnych parametrów tzn. jak index większy niź.. to chowa jak jest wybrany mniejszy index to nie chowa.

0

Spoko to zmień sobie znak != na > i będzie git. To banalna zmiana, więc kodu nie będę po raz kolejny wklejał

0

Zmieniłem to co mówiłeś, niestety zmieniło się tylko to że teraz wszystko powyżej zaznaczonego (włącznie z nim) są ukrywane, chodziło mi o coś z mojego pierwszego przykładu.
Żeby zachowywało się tak jak tam: przy wyborze indeksu powyżej np. 2 było ukrywane, natomiast poniżej odkryte (i to chodzi w tym moim pierwszym).
Moim problemem było to że jeżeli wczytam stronę z zadanym indeksem poniżej 2 np. 1 pole nie było ukryte (podczas wczytania strony), powinno również odkrywać pole jeżeli zadany index podczas wczytania wynosił np. 4.

0

Tymczasowo poradziłem sobie dodając dynamiczną zmianę <body> przy pomocy php, raz wczytuję:

<body onload="ukryj(obj);">

a raz:

<body onload="pokaz(obj);">

w zależności od zmiennej wczytanej z bazy.
Wiem że jest to sposób "nie ładny", ale dokąd nie znajdę lepszego będę go używał, bo czas goni..

0

Z tego, co piszesz, zrozumiałem, że chodzi Ci o to, by ukrywanie i pokazywanie działało na zasadzie przełączania (toggling). Jeżeli indeks wybranego elementu jest większy (mniejszy?) niż X, pokaż zakryte i ukryj pokazane. Ale nadal nie wiem, o które elementy i warunki Ci chodzi – które mają być kiedy ukryte, a kiedy zakryte.

0

Chodzi mi o ukrywanie pola o ID "dost_reczn1" w zależności od indeksu "select", tutaj mam wpisaną wartość "1" (this.selectedIndex > 1), ale ta wartość będzie różna w zalężności od zawartości bazy, i ten kawałek:

 onchange="if(this.selectedIndex > 1) { pokaz('dost_reczn1'); } else { ukryj('dost_reczn1'); } "

chodzi poprawnie.
Problem jest gdy wczytuję stronę z wybraną konkretną wartością w polu select (baza danych), wtedy jeżeli wartość nakazuje ukryć pole, podczas wczytywania strony pozostaje ono nieukryte.

0

Przychodzi mi do głowy jedno rozwiązanie: wywołanie tej samej funkcji dwa razy. Raz wywołana musi być przy wczytywaniu strony (np. w odpowiedzi na zdarzenie onload), a raz przy ręcznej zmianie indeksu.

Jak to powinno zostać wykonane to zależy jeszcze od tego, w jaki sposób "wczytujesz" stronę z wybraną konkretną zawartością w kontrolce select. Początkowy "stan strony" zależy od zewnętrznego parametru, więc jakoś musi on być do tej strony przekazany (chyba że to nie strona obsługiwałaby zmianę wartości w kontrolce select – ale jak inaczej, to nie przychodzi mi do głowy, za mało informacji). Być może jedyny sposób to ten, który zastosowałeś (wczytywanie raz tego znacznika, raz innego). Nie znam się na PHP, być może są inne sposoby.

0

Lol Panowie, kod już przecież napisałem. Wystarczy teraz przekazać z serwera id do JS.

0

No i dzięki temu co napisałeś "Haskell" zastosowałem php w którym zmieniam wywołanie <body> i działa :)
Dzięki.

1 użytkowników online, w tym zalogowanych: 0, gości: 1