Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Styl zależny od 2 wartości

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

Styl zależny od 2 wartości

Post 21.02.2018, 00:18:14

Witam, męczę się z tym już od 2 tyg xD zrobiłem skrypt który działa, gdy jest zależność tylko od pola name(zmienia style <option> tam gdzie name jest równe wartości z pola id.
Kod: Zaznacz cały
   var xd = document.getElementById("BMW").value;         
   document.getElementById("silnik").value = " ";      
   var x = document.getElementsByName(xd);
    var i;
    for (i = 0; i < x.length; i++) {
            x[i].style.display = "";
      }


Skrypt działa, niestety spotkałem się z taką przypadłością, że ta zmiana stylu jest zależna od 2 wartości. Problem wygląda tak przykładowo

<input type="text" name="pole1" id="pole1">
<input type="text" name="pole2" id="pole2">

<select>
<option id="pole1" name="pole2" stlye="display: none"></option>
...
...
...
...
</select>

np

pole 1 = BMW
pole 2 = disel


Muszą się pojawiać tylko rekordy które mają w id BMW i w name disel nic innego(przykład)


Mam nadzieje, że znowu mi pomożecie troszkę, chociaż nakierować ;) Z góry dziękuje ^^

P.s próbowałem z getElementByTagName ale też nie dało rady.
Puffin07
Posty: 11
Dołączył(a): 20.01.2018

Re: Styl zależny od 2 wartości

Post 21.02.2018, 05:30:08

<pusty post>
kabexxx
Posty: 212
Dołączył(a): 27.11.2011

Re: Styl zależny od 2 wartości

Post 21.02.2018, 05:39:23

Nie rozumiem posta w ogóle. Postaw problem jaśniej.
kabexxx
Posty: 212
Dołączył(a): 27.11.2011

Re: Styl zależny od 2 wartości

Post 21.02.2018, 12:10:17

Przepraszam, pisałem to po północy już i mogłem być niezrozumiały.

Tak w dużym skrócie.

Dam przykład, mam trzy pola:
Kod: Zaznacz cały
<select id="marka" name="marka">
<option> </option>
<option>BMW</option>
<option>AUDI</option>
</select>

<select id="silnik" name="silnik" onchange="wynik()">
<option> </option>
<option>1.5</option>
<option>2.0</option>
<option>3.0</option>
<option>3.5</option>
</select>

<select id="samochody" name="samochody">
<option> </option>
<option id="BMW" name="1.5 "style="display: none">E36</option>
<option id="BMW" name="2.0" style="display: none">E21 </option>
<option id="BMW" name="3.0" style="display: none">E60</option>
<option id="BMW" name="3.5" style="display: none">E46</option>
<option id="BMW" name="3.5" style="display: none">E90</option>
<option id="AUDI" name="1.5" style="display: none">A3</option>
<option id="AUDI" name="2.0" style="display: none">A5</option>
<option id="AUDI" name="3.0" style="display: none">A6</option>
<option id="AUDI" name="3.5" style="display: none">RS</option>
</select>

Tak więc co ma robić funkcja wynik():
1.Pobierać wartość jaką wybraliśmy w polu pierwszym ( var m = document.getElementById("marka").value )
2.Pobierać wartość jaką wybraliśmy w polu drugim ( var s = document.getElementById("silnik").value )
3.Zmieniać styl na widoczny w polu trzecim (style.display = "")

Dziękuje za szybką reakcje, generalnie skrypt musiałby być coś w stylu:
Kod: Zaznacz cały
<script>
function wynik() {
var m = document.getElementById("marka").value;
var s = document.getElementById("silnik").value;
var x = document.getElementById(m).getElementsByName(s);
var i;
    for (i = 0; i < x.length; i++) {
            x[i].style.display = "";
      }
}
</script>
Puffin07
Posty: 11
Dołączył(a): 20.01.2018

Re: Styl zależny od 2 wartości

Post 21.02.2018, 12:14:03

Wiesz co próbowałem jeszcze z getElementsByTagNames ale też nie chciało mi działąć niestety :/
Puffin07
Posty: 11
Dołączył(a): 20.01.2018

Re: Styl zależny od 2 wartości

Post 21.02.2018, 19:21:15

Ogólnie trochę błędów, ale niewielkich. To trzecie to nie błąd, oczywiście :D
1. Nie ma metody getElementsByTagNames. Chodzi o getElementsByTagName?
2. Nie używaj name i id w ten sposób. Masz od tego atrybuty data-*.
3. Lepiej użyć const, a nie var, ale można oczywiście :P

Postanowiłem zrobić to od nowa i użyłem pętli przechodzenia po pętli elementów - będzie dużo szybciej (nie babra się w drzewie DOM kilka razy) i jest dość logicznie. Zwłaszcza jeśli chcesz rozbudowywać o dodatkowe warunki:
Kod: Zaznacz cały
<body>
<main style="list-style: decimal inside">
   <p style="display: list-item" data-trade="BMW" data-v="1">Akapit 1</p>
   <p style="display: list-item" data-trade="BMW" data-v="2" >Akapit 2</p>
   <p style="display: list-item" data-trade="XXX" data-v="1" >Akapit 3</p>
   <div>Nie interesuje mnie</div>
</main>
<script defer>
   const a = 'BMW'; const b = 1;
   const x = document.querySelectorAll("main > p");
   for (i=0; i<x.length; i++) {
      if(x[i].dataset.trade == a && x[i].dataset.v == b) {
         x[i].style.display = 'none';
         }
      }
   </script>
   </body>

Oczywiście nie patrz się na style, powstały do czego innego i nie chciało mi się usuwać.
Parametry, które tu oznaczyłem jako a i b dobrze sobie szukałeś w skrypcie, więc dałem tu na sztywno, sobie podstawisz samodzielnie ;)

Możesz też oczywiście zmienić selektor na taki jak body > p['data-set="'+a+'"]' i uruchomić w if tylko jeden warunek, wszystkie getElement* itd. oczywiście również zadziałają itd. To tylko taka prezentacja.
kabexxx
Posty: 212
Dołączył(a): 27.11.2011

Re: Styl zależny od 2 wartości

Post 21.02.2018, 21:44:37

Jutro już zacznę to testować i próbować wstawić do mojego kodu. Jak się wszystko uda to wygrałeś czteropak ^^(poważnie) ;) Napisze już raczej na pw ;)
Puffin07
Posty: 11
Dołączył(a): 20.01.2018

Re: Styl zależny od 2 wartości

Post 22.02.2018, 15:03:42

Działa wszystko ;)
Puffin07
Posty: 11
Dołączył(a): 20.01.2018


Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Google [Bot] i 3 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 51510 zarejestrowanych użytkowników.
Najnowszy użytkownik: Steeveroutt


Nasi użytkownicy napisali:

  • 937837 wiadomości
  • w 247508 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)