Skocz do zawartości
PL
Szukaj na Pecetowiczu
Nowe Szukaj Zaloguj Dołącz
  • Utwórz konto

Jak w Javascript zrobić dynamiczne pole Select

adam2350 •
JavaScript

Udostępnij
Rekomendowane odpowiedzi

adam2350

Jak w JavaScript można zrobić dynamicznie zmieniający się tekst po wybraniu odpowiedniego pole select? 

                    <form action="#" method="post">
                    <select name="linia" >
		<option value="l120">Linia 120</option>
		<option value="l121">Linia 121</option>
		
	</select>

tj. 

po wybraniu linii 120 pod spodem wyświetli się trasa (tak samo z 121 i każdą kolejną). Trasa wyświetlana w formie tekstu. 

W JS jestem zielony 

Odnośnik do komentarza
Udostępnij na innych stronach

-n3veR

AJAX + jakieś API do map.

Odnośnik do komentarza
Udostępnij na innych stronach

adam2350

  • Autor
2 minuty temu, BlackIce napisał:

AJAX + jakieś API do map.

Trasa w formie tekstu. Zapomniałem nadmienić. 

Odnośnik do komentarza
Udostępnij na innych stronach

-n3veR

Still... AJAX + API.

Odnośnik do komentarza
Udostępnij na innych stronach

adam2350

  • Autor
Teraz, BlackIce napisał:

Still... AJAX + API.

Ten HTML to wszystko. 

?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

Odnośnik do komentarza
Udostępnij na innych stronach

-n3veR

(edytowane)

Dobra, przeczytałem posta jeszcze raz 

Nie potrzebujesz jednak AJAXa i API...

Na stronie poniżej masz demo, gdzie jest to czego potrzebujesz. Wytarczy później jeszcze tylko regexem przepuścić samą liczbę z .text() 

.change() | jQuery API Documentation

Edytowane przez BlackIce
Odnośnik do komentarza
Udostępnij na innych stronach

adam2350

  • Autor
9 minut temu, BlackIce napisał:

Dobra, przeczytałem posta jeszcze raz 

Nie potrzebujesz jednak AJAXa i API...

 

.change() | jQuery API Documentation

Jak to w zasadzie działa?

Jak ja mam w to upchnąć takie coś? 

<p>
                    <p class="red bold">Linia 120</p><b> Kierunek > Staroźreby</b> <br>
                    <p class="gmina bold">Gmina: Płock</p> 
                    <p class="red bold">A</p> Jachowicza (teatr) 
                    <p class="red bold">A</p> Piękna 
                    <p class="red bold">A</p> Stanisławówka 01 
                    <p class="red bold">A</p> Kołłątaja 
                    <p class="red bold">A</p> Otolińska, WORD 
                    <p class="red bold">A</p> Otolińska, Boryszewo
                    <p class="gmina bold">Gmina: Radzanowo</p>
 <p class="blue bold">B</p> Nowe Boryszewo, Boryszewska (nż)
<p class="blue bold">B</p> Nowe Boryszewo, I (nż)
<p class="blue bold">B</p>Nowe Boryszewo (nż)
<p class="blue bold">B</p> Stare Boryszewo (nż)
<p class="blue bold">B</p>Stróżewko, II (nż)
<p class="blue bold">B</p>Rogozino, szkoła (nż)
<p class="blue bold">B</p>Rogozino, Mazowiecka (nż)
<p class="blue bold">B</p> Rogozino, rondo (nż)
<p class="blue bold">B</p> Rogozino, Płocka (nż)
<p class="blue bold">B</p> Wodzymin (nż)
<p class="blue bold">B</p> Radzanowo, skrzyż. (nż)
<p class="blue bold">B</p> Radzanowo, Szkolna (nż)
<p class="blue bold">B</p>Woźniki, skrzyż. (nż)
<p class="blue bold">B</p> Woźniki-Paklewy, skrzyż. (nż)
                    <p class="gmina bold"> Gmina: Staroźreby</p>
 <p class="green bold">C</p> Smardzewo (nż)
 <p class="green bold">C</p> Opatówiec (nż)
  <p class="green bold">C</p> Staroźreby (nż)
                    
                    </p>
Odnośnik do komentarza
Udostępnij na innych stronach

arces

Musisz skrypt napisać, który będzie ładował odpowiednią trasę po zmianie w polu select. Z tym kodem HTML, który masz obecnie będzie to pewnie ciężkie do zrealizowania w jakiś prosty sposób.

Kolega podał dobre rozwiązanie wyżej, ale jeżeli nie masz bladego pojęcia jak to zrobić, to może po prostu lepiej komuś to zlecić niż głowić się? Za free może ktoś miły Ci to zrobi, ale wątpię.

P.S.

Ten HTML w ogóle jakoś dziwnie skonstruowany jest, kto Ci to pisał?

Odnośnik do komentarza
Udostępnij na innych stronach

adam2350

  • Autor
1 minutę temu, arces napisał:

Musisz skrypt napisać, który będzie ładował odpowiednią trasę po zmianie w polu select. Z tym kodem HTML, który masz obecnie będzie to pewnie ciężkie do zrealizowania w jakiś prosty sposób.

 

Kolega podał dobre rozwiązanie wyżej, ale jeżeli nie masz bladego pojęcia jak to zrobić, to może po prostu lepiej komuś to zlecić niż głowić się? Za free może ktoś miły Ci to zrobi, ale wątpię.

 

P.S.

Ten HTML w ogóle jakoś dziwnie skonstruowany jest, kto Ci to pisał?

Dlaczego niby dziwnie skonstruowany?

Odnośnik do komentarza
Udostępnij na innych stronach

-n3veR

Nie zagnieżdża się `p` w `p`

Poza tym... Pisałeś wyżej, że podałeś cały HTML... Czyli jednak będziesz potrzebować AJAXa i API

Myślałem, że potrzebujsz pobrać 'Linia 120' i z tego wyciągnąć 120.

Odnośnik do komentarza
Udostępnij na innych stronach

adam2350

  • Autor
Teraz, BlackIce napisał:

Nie zagnieżdża się `p` w `p`

 

Poza tym... Pisałeś wyżej, że podałeś cały HTML... Czyli jednak będziesz potrzebować AJAXa i API

Myślałem, że potrzebujsz pobrać 'Linia 120' i z tego wyciągnąć 120.

Wtedy kiedy pisałem post to był cały html. 

Cytuj

Nie zagnieżdża się `p` w `p`

Muszę to poprawić ☺️ 

Odnośnik do komentarza
Udostępnij na innych stronach

vader

Podeslij mi caly kod html, napisze Ci js do tego

Odnośnik do komentarza
Udostępnij na innych stronach

adam2350

  • Autor
9 minut temu, vader napisał:

Podeslij mi caly kod html, napisze Ci js do tego 

<label>
                        <span>Numer Linii</span>
                        <select name="linia" >
		<option value="l120">Linia 120</option>
		<option value="l121">Linia 121</option>
		
                        </select>
                        </label>
                        <br>
                        <br>
                    <p class="red bold">Linia 120</p><b> Kierunek > Staroźreby</b> <br>
                    <p class="gmina bold">Gmina: Płock</p> 
                    <p class="red bold">A</p> Jachowicza (teatr) 
                    <p class="red bold">A</p> Piękna 
                    <p class="red bold">A</p> Stanisławówka 01 
                    <p class="red bold">A</p> Kołłątaja 
                    <p class="red bold">A</p> Otolińska, WORD 
                    <p class="red bold">A</p> Otolińska, Boryszewo
                    <p class="gmina bold">Gmina: Radzanowo</p>
 <p class="blue bold">B</p> Nowe Boryszewo, Boryszewska (nż)
<p class="blue bold">B</p> Nowe Boryszewo, I (nż)
<p class="blue bold">B</p>Nowe Boryszewo (nż)
<p class="blue bold">B</p> Stare Boryszewo (nż)
<p class="blue bold">B</p>Stróżewko, II (nż)
<p class="blue bold">B</p>Rogozino, szkoła (nż)
<p class="blue bold">B</p>Rogozino, Mazowiecka (nż)
<p class="blue bold">B</p> Rogozino, rondo (nż)
<p class="blue bold">B</p> Rogozino, Płocka (nż)
<p class="blue bold">B</p> Wodzymin (nż)
<p class="blue bold">B</p> Radzanowo, skrzyż. (nż)
<p class="blue bold">B</p> Radzanowo, Szkolna (nż)
<p class="blue bold">B</p>Woźniki, skrzyż. (nż)
<p class="blue bold">B</p> Woźniki-Paklewy, skrzyż. (nż)
                    <p class="gmina bold"> Gmina: Staroźreby</p>
 <p class="green bold">C</p> Smardzewo (nż)
 <p class="green bold">C</p> Opatówiec (nż)
  <p class="green bold">C</p> Staroźreby (nż)
                    
            <br>
            <br>
                        <p class="red bold">Linia 120</p><b> Kierunek > Jachowicza (teatr)
 </b> <br>

                <p class="gmina bold"> Gmina: Staroźreby</p>   
   <p class="green bold">C</p> Staroźreby (nż)
             <p class="green bold">C</p> Opatówiec (nż)
            <p class="green bold">C</p> Smardzewo (nż)


                    <p class="gmina bold">Gmina: Radzanowo</p>
 <p class="blue bold">B</p> Woźniki-Paklewy, skrzyż. (nż)
 <p class="blue bold">B</p> Woźniki, skrzyż. (nż)
<p class="blue bold">B</p> Radzanowo, Szkolna (nż)
 <p class="blue bold">B</p> Radzanowo, skrzyż. (nż)
<p class="blue bold">B</p> Wodzymin (nż)
<p class="blue bold">B</p>Rogozino, Płocka (nż)
<p class="blue bold">B</p> Rogozino, Wiejska (nż)
 <p class="blue bold">B</p> Rogozino, Mazowiecka (nż)
<p class="blue bold">B</p> Rogozino, szkoła (nż)
<p class="blue bold">B</p> Rogozino, Imielnicka (nż)
<p class="blue bold">B</p> Stróżewko, II (nż)
<p class="blue bold">B</p> Stare Boryszewo (nż)
<p class="blue bold">B</p> Nowe Boryszewo (nż)
 <p class="blue bold">B</p> Nowe Boryszewo, I (nż)
 <p class="blue bold">B</p> Nowe Boryszewo, Boryszewska (nż)
<p class="gmina bold">Gmina: Płock</p> 
 <p class="red bold">A</p> Otolińska, Boryszewo
<p class="red bold">A</p> Otolińska, WORD
 <p class="red bold">A</p> Kołłątaja
<p class="red bold">A</p> Stanisławówka 02
<p class="red bold">A</p> Piękna
 <p class="red bold">A</p> Jachowicza (teatr)
                    
        
        
                    
<br>
            <br>
                        <p class="red bold">Linia 121</p><b> Kierunek > Rogozino, Mazowiecka
 </b> <br>


<p class="gmina bold">Gmina: Płock</p> 
 <p class="red bold">A</p> Podolszyce 02
  <p class="red bold">A</p> Czwartaków
 <p class="red bold">A</p> Szarych Szeregów
 <p class="red bold">A</p> Łączniczek
 <p class="red bold">A</p> Hubalczyków
 <p class="red bold">A</p> Roweckiego
 <p class="red bold">A</p> Żyzna
<p class="gmina bold"> Gmina: Radzanowo</p>
<p class="blue bold">B</p> Nowe Boryszewo (nż)
<p class="blue bold">B</p> Stróżewko przedszkole (nż)
<p class="blue bold">B</p> Stróżewko, działki (nż)
<p class="blue bold">B</p> Stare Boryszewo (nż)
<p class="blue bold">B</p> Stróżewko, II (nż)
<p class="blue bold">B</p> Rogozino, Imielnicka (nż)
<p class="blue bold">B</p> Rogozino, Wiejska (nż)
<p class="blue bold">B</p> Rogozino, Mazowiecka (nż)
                    
<br>
            <br>
                             <p class="red bold">Linia 121</p><b> Kierunek > Podolszyce 01
 </b> <br>


<p class="gmina bold"> Gmina: Radzanowo</p>
 <p class="blue bold">B</p> Rogozino, Mazowiecka (nż)
 <p class="blue bold">B</p> Rogozino, szkoła (nż)
<p class="blue bold">B</p> Rogozino, Imielnicka (nż)
 <p class="blue bold">B</p> Stróżewko, II (nż)
 <p class="blue bold">B</p> Stare Boryszewo (nż)
<p class="blue bold">B</p> Nowe Boryszewo (nż)
<p class="gmina bold">Gmina: Płock</p> 
  <p class="red bold">A</p> Żyzna
 <p class="red bold">A</p> Roweckiego
 <p class="red bold">A</p> Hubalczyków
 <p class="red bold">A</p> Łączniczek
  <p class="red bold">A</p> Szarych Szeregów
 <p class="red bold">A</p> Czwartaków
 <p class="red bold">A</p> Podolszyce 01
<br>
<br>
  <p class="red bold">A</p> - Strefa Taryfowa A<br>
<p class="blue bold">B</p> - Strefa Taryfowa B<br>
  <p class="green bold">C</p> - Strefa Taryfowa C
Odnośnik do komentarza
Udostępnij na innych stronach

Ardex

(edytowane)

Skoro wszystko będzie w tym samym pliku to wystarczy odpowiednie nazewnictwo klas i da się to zrobić w prosty sposób.

Na początek HTML

Nazwa linii musi mieć taką nazwę 

<div class="_l120">Linia 120</div>

Linia 121 będzie miała klasę _l121 itd

Cały rozkład jazdy danej linii musisz umieścić w divie 

<div class="_t120">tutaj twój kod, rozkład linii obojętne co</div>

każdy rozkład w innym divie i z inną nazwą klasy, dla linii 121 nazwa klasy ma być _t121 dla 122 nazwa _t122 itd. Teraz kod CSS żeby trasa była domyślnie niewidoczna 

div[class^="_t"] {
		display: none;
	}

i jQuery (pamiętaj, że musisz dodać tą bibliotekę jeśli jej nie używasz) 

<script>
$(document).ready(function() {
	$('div[class^="_l"]').click(function() {
		var classNameOfClickedElement = $(this).attr("class")
		var classNameAfterReplacing = classNameOfClickedElement.replace("_l", "_t")

		if ($("." + classNameAfterReplacing).css("display") == "none") {
			$('div[class^="_t"]').fadeOut(300)
			$("." + classNameAfterReplacing).slideDown(500)
		} else {
			$("." + classNameAfterReplacing).fadeOut(500)
		}
	})

})


</script>

cały kod HTML, edytuj go sobie 

	<div class="_l120">Linia 120</div>
	<div class="_t120"><p class="gmina bold">Gmina: Płock</p> 
                    <p class="red bold">A</p> Jachowicza (teatr) 
                    <p class="red bold">A</p> Piękna 
                    <p class="red bold">A</p> Stanisławówka 01 
                    <p class="red bold">A</p> Kołłątaja 
                    <p class="red bold">A</p> Otolińska, WORD 
                    <p class="red bold">A</p> Otolińska, Boryszewo
                    <p class="gmina bold">Gmina: Radzanowo</p>
 <p class="blue bold">B</p> Nowe Boryszewo, Boryszewska (nż)
<p class="blue bold">B</p> Nowe Boryszewo, I (nż)
<p class="blue bold">B</p>Nowe Boryszewo (nż)
<p class="blue bold">B</p> Stare Boryszewo (nż)
<p class="blue bold">B</p>Stróżewko, II (nż)
<p class="blue bold">B</p>Rogozino, szkoła (nż)
<p class="blue bold">B</p>Rogozino, Mazowiecka (nż)
<p class="blue bold">B</p> Rogozino, rondo (nż)
<p class="blue bold">B</p> Rogozino, Płocka (nż)
<p class="blue bold">B</p> Wodzymin (nż)
<p class="blue bold">B</p> Radzanowo, skrzyż. (nż)
<p class="blue bold">B</p> Radzanowo, Szkolna (nż)
<p class="blue bold">B</p>Woźniki, skrzyż. (nż)
<p class="blue bold">B</p> Woźniki-Paklewy, skrzyż. (nż)
<p class="gmina bold"> Gmina: Staroźreby</p>
 <p class="green bold">C</p> Smardzewo (nż)
 <p class="green bold">C</p> Opatówiec (nż)
  <p class="green bold">C</p> Staroźreby (nż)</div>


<div class="_l121">Linia 121</div>
<div class="_t121">Nie chce mi sie wymyslac trasy</div>
Edytowane przez Ardex
Odnośnik do komentarza
Udostępnij na innych stronach

adam2350

  • Autor
(edytowane)
11 minut temu, Ardex napisał:

Skoro wszystko będzie w tym samym pliku to wystarczy odpowiednie nazewnictwo klas i da się to zrobić w prosty sposób.

Na początek HTML

Nazwa linii musi mieć taką nazwę 


<div class="_l120">Linia 120</div>

Linia 121 będzie miała klasę _l121 itd

Cały rozkład jazdy danej linii musisz umieścić w divie 


<div class="_t120">tutaj twój kod, rozkład linii obojętne co</div>

każdy rozkład w innym divie i z inną nazwą klasy, dla linii 121 nazwa klasy ma być _t121. Teraz kod CSS żeby trasa była domyślnie niewidoczna 


div[class^="_t"] {
		display: none;
	}

i jQuery (pamiętaj, że musisz dodać tą bibliotekę jeśli jej nie używasz) 


<script>
$(document).ready(function() {
	$('div[class^="_l"]').click(function() {
		var classNameOfClickedElement = $(this).attr("class")
		var classNameAfterReplacing = classNameOfClickedElement.replace("_l", "_t")

		if ($("." + classNameAfterReplacing).css("display") == "none") {
			$('div[class^="_t"]').fadeOut(300)
			$("." + classNameAfterReplacing).slideDown(500)
		} else {
			$("." + classNameAfterReplacing).fadeOut(500)
		}
	})

})


</script>

 

cały kod HTML, edytuj go sobie 


	<div class="_l120">Linia 120</div>
	<div class="_t120"><p class="gmina bold">Gmina: Płock</p> 
                    <p class="red bold">A</p> Jachowicza (teatr) 
                    <p class="red bold">A</p> Piękna 
                    <p class="red bold">A</p> Stanisławówka 01 
                    <p class="red bold">A</p> Kołłątaja 
                    <p class="red bold">A</p> Otolińska, WORD 
                    <p class="red bold">A</p> Otolińska, Boryszewo
                    <p class="gmina bold">Gmina: Radzanowo</p>
 <p class="blue bold">B</p> Nowe Boryszewo, Boryszewska (nż)
<p class="blue bold">B</p> Nowe Boryszewo, I (nż)
<p class="blue bold">B</p>Nowe Boryszewo (nż)
<p class="blue bold">B</p> Stare Boryszewo (nż)
<p class="blue bold">B</p>Stróżewko, II (nż)
<p class="blue bold">B</p>Rogozino, szkoła (nż)
<p class="blue bold">B</p>Rogozino, Mazowiecka (nż)
<p class="blue bold">B</p> Rogozino, rondo (nż)
<p class="blue bold">B</p> Rogozino, Płocka (nż)
<p class="blue bold">B</p> Wodzymin (nż)
<p class="blue bold">B</p> Radzanowo, skrzyż. (nż)
<p class="blue bold">B</p> Radzanowo, Szkolna (nż)
<p class="blue bold">B</p>Woźniki, skrzyż. (nż)
<p class="blue bold">B</p> Woźniki-Paklewy, skrzyż. (nż)
<p class="gmina bold"> Gmina: Staroźreby</p>
 <p class="green bold">C</p> Smardzewo (nż)
 <p class="green bold">C</p> Opatówiec (nż)
  <p class="green bold">C</p> Staroźreby (nż)</div>


<div class="_l121">Linia 121</div>
<div class="_t121">Nie chce mi sie wymyslac trasy</div>

 

 

Trasa pokaże się dopiero po kliknięciu w pole zaznaczone na czerwono. Jak zrobić by po wybraniu w polu select od razu się wyświetlała.

Scr.hu

Edytowane przez adam2350
Odnośnik do komentarza
Udostępnij na innych stronach

-n3veR

13 minut temu, Ardex napisał:

Skoro wszystko będzie w tym samym pliku to wystarczy odpowiednie nazewnictwo klas i da się to zrobić w prosty sposób.

Na początek HTML

Nazwa linii musi mieć taką nazwę 


<div class="_l120">Linia 120</div>

Linia 121 będzie miała klasę _l121 itd

Cały rozkład jazdy danej linii musisz umieścić w divie 


<div class="_t120">tutaj twój kod, rozkład linii obojętne co</div>

każdy rozkład w innym divie i z inną nazwą klasy, dla linii 121 nazwa klasy ma być _t121 dla 122 nazwa _t122 itd. Teraz kod CSS żeby trasa była domyślnie niewidoczna 


div[class^="_t"] {
		display: none;
	}

i jQuery (pamiętaj, że musisz dodać tą bibliotekę jeśli jej nie używasz) 


<script>
$(document).ready(function() {
	$('div[class^="_l"]').click(function() {
		var classNameOfClickedElement = $(this).attr("class")
		var classNameAfterReplacing = classNameOfClickedElement.replace("_l", "_t")

		if ($("." + classNameAfterReplacing).css("display") == "none") {
			$('div[class^="_t"]').fadeOut(300)
			$("." + classNameAfterReplacing).slideDown(500)
		} else {
			$("." + classNameAfterReplacing).fadeOut(500)
		}
	})

})


</script>

 

cały kod HTML, edytuj go sobie 


	<div class="_l120">Linia 120</div>
	<div class="_t120"><p class="gmina bold">Gmina: Płock</p> 
                    <p class="red bold">A</p> Jachowicza (teatr) 
                    <p class="red bold">A</p> Piękna 
                    <p class="red bold">A</p> Stanisławówka 01 
                    <p class="red bold">A</p> Kołłątaja 
                    <p class="red bold">A</p> Otolińska, WORD 
                    <p class="red bold">A</p> Otolińska, Boryszewo
                    <p class="gmina bold">Gmina: Radzanowo</p>
 <p class="blue bold">B</p> Nowe Boryszewo, Boryszewska (nż)
<p class="blue bold">B</p> Nowe Boryszewo, I (nż)
<p class="blue bold">B</p>Nowe Boryszewo (nż)
<p class="blue bold">B</p> Stare Boryszewo (nż)
<p class="blue bold">B</p>Stróżewko, II (nż)
<p class="blue bold">B</p>Rogozino, szkoła (nż)
<p class="blue bold">B</p>Rogozino, Mazowiecka (nż)
<p class="blue bold">B</p> Rogozino, rondo (nż)
<p class="blue bold">B</p> Rogozino, Płocka (nż)
<p class="blue bold">B</p> Wodzymin (nż)
<p class="blue bold">B</p> Radzanowo, skrzyż. (nż)
<p class="blue bold">B</p> Radzanowo, Szkolna (nż)
<p class="blue bold">B</p>Woźniki, skrzyż. (nż)
<p class="blue bold">B</p> Woźniki-Paklewy, skrzyż. (nż)
<p class="gmina bold"> Gmina: Staroźreby</p>
 <p class="green bold">C</p> Smardzewo (nż)
 <p class="green bold">C</p> Opatówiec (nż)
  <p class="green bold">C</p> Staroźreby (nż)</div>


<div class="_l121">Linia 121</div>
<div class="_t121">Nie chce mi sie wymyslac trasy</div>

 

 

A po co do tego ładować ciężkie jQ, skoro to ma być w jednym pliku i większych operacji na DOMie nie robisz niż pokaż / ukryj ?

Odnośnik do komentarza
Udostępnij na innych stronach

Ardex

(edytowane)
2 godziny temu, BlackIce napisał:

Dobra, przeczytałem posta jeszcze raz 

Nie potrzebujesz jednak AJAXa i API...

 

Na stronie poniżej masz demo, gdzie jest to czego potrzebujesz. Wytarczy później jeszcze tylko regexem przepuścić samą liczbę z .text() 

.change() | jQuery API Documentation

hmm a Ty dlaczego wysłałeś linka do .change() ? Jeśli chcesz, to nic nie stoi na przeszkodzie żebyś przerobił ten kod na czysty JavaScript

@adam2350 proszę 

$(document).ready(function() {
	$('[name="linia"]').change(function() {
		var numberOfBussLine = $('[name="linia"] option:selected').attr("class")
		var classNameAfterReplacing = numberOfBussLine.replace("_l", "_t")

		if ($("." + classNameAfterReplacing).css("display") == "none") {
			$('div[class^="_l"]').fadeOut()
			$("." + classNameAfterReplacing).slideDown(500)
		} else {
			$("." + classNameAfterReplacing).fadeOut(500)
		}
	})

})
Edytowane przez Ardex
Odnośnik do komentarza
Udostępnij na innych stronach

adam2350

  • Autor
12 minut temu, Ardex napisał:

 

hmm a Ty dlaczego wysłałeś linka do .change() ? Jeśli chcesz, to nic nie stoi na przeszkodzie żebyś przerobił ten kod na czysty JavaScript

 

@adam2350 proszę 


$(document).ready(function() {
	$('[name="linia"]').change(function() {
		var numberOfBussLine = $('[name="linia"] option:selected').attr("class")
		var classNameAfterReplacing = numberOfBussLine.replace("_l", "_t")

		if ($("." + classNameAfterReplacing).css("display") == "none") {
			$('div[class^="_l"]').fadeOut()
			$("." + classNameAfterReplacing).slideDown(500)
		} else {
			$("." + classNameAfterReplacing).fadeOut(500)
		}
	})

})

 

Kod HTML tak samo?

Jak tak to nie działa. Bynajmniej u mnie.

Odnośnik do komentarza
Udostępnij na innych stronach

Ardex

(edytowane)

Tak, zapomniałem napisać, że select trzeba zmienić na taki. Nie trzeba używać divów w numerach linii, jak pisałem pierwsze rozwiązanie to nie spojrzałem, że masz to w selekcie wszystko i dlatego o divach napisałem. Teraz to nie obowiązuje i takie coś wystarczy 

<select name="linia" >
		<option value="l120" class="_l120">Linia 120</option>
		<option value="l121" class="_l121">Linia 121</option>
		</select>

Jak nie zadziała to daj demo, tutaj lub na priv

Edytowane przez Ardex
Odnośnik do komentarza
Udostępnij na innych stronach

adam2350

  • Autor
6 minut temu, Ardex napisał:

Tak, zapomniałem napisać, że select trzeba zmienić na taki. Nie trzeba używać divów w numerach linii, jak pisałem pierwsze rozwiązanie to nie spojrzałem, że masz to w selekcie wszystko i dlatego o divach napisałem. Teraz to nie obowiązuje i takie coś wystarczy 


<select name="linia" >
		<option value="l120" class="_l120">Linia 120</option>
		<option value="l121" class="_l121">Linia 121</option>
		</select>

 

Jak nie zadziała to daj demo, tutaj lub na priv

czyli ma być tak jak poprzednio?:

Spoiler 

<select name="linia" >
			<option value="l120" class="_l120">Linia 120</option>
		<option value="l121" class="_l121">Linia 121</option>
		
                        </select>
                        </label>
                        <br>
                        <br>
                        <p class="red bold">Linia 120</p><b> Kierunek > Staroźreby</b> <br>
                    <p class="gmina bold">Gmina: Płock</p> 
                    <p class="red bold">A</p> Jachowicza (teatr) 
                    <p class="red bold">A</p> Piękna 
                    <p class="red bold">A</p> Stanisławówka 01 
                    <p class="red bold">A</p> Kołłątaja 
                    <p class="red bold">A</p> Otolińska, WORD 
                    <p class="red bold">A</p> Otolińska, Boryszewo
                    <p class="gmina bold">Gmina: Radzanowo</p>
 <p class="blue bold">B</p> Nowe Boryszewo, Boryszewska (nż)
<p class="blue bold">B</p> Nowe Boryszewo, I (nż)
<p class="blue bold">B</p>Nowe Boryszewo (nż)
<p class="blue bold">B</p> Stare Boryszewo (nż)
<p class="blue bold">B</p>Stróżewko, II (nż)
<p class="blue bold">B</p>Rogozino, szkoła (nż)
<p class="blue bold">B</p>Rogozino, Mazowiecka (nż)
<p class="blue bold">B</p> Rogozino, rondo (nż)
<p class="blue bold">B</p> Rogozino, Płocka (nż)
<p class="blue bold">B</p> Wodzymin (nż)
<p class="blue bold">B</p> Radzanowo, skrzyż. (nż)
<p class="blue bold">B</p> Radzanowo, Szkolna (nż)
<p class="blue bold">B</p>Woźniki, skrzyż. (nż)
<p class="blue bold">B</p> Woźniki-Paklewy, skrzyż. (nż)
                    <p class="gmina bold"> Gmina: Staroźreby</p>
 <p class="green bold">C</p> Smardzewo (nż)
 <p class="green bold">C</p> Opatówiec (nż)
  <p class="green bold">C</p> Staroźreby (nż)
                    
            <br>
            <br>
                        <p class="red bold">Linia 120</p><b> Kierunek > Jachowicza (teatr)
 </b> <br>

                <p class="gmina bold"> Gmina: Staroźreby</p>   
   <p class="green bold">C</p> Staroźreby (nż)
             <p class="green bold">C</p> Opatówiec (nż)
            <p class="green bold">C</p> Smardzewo (nż)


                    <p class="gmina bold">Gmina: Radzanowo</p>
 <p class="blue bold">B</p> Woźniki-Paklewy, skrzyż. (nż)
 <p class="blue bold">B</p> Woźniki, skrzyż. (nż)
<p class="blue bold">B</p> Radzanowo, Szkolna (nż)
 <p class="blue bold">B</p> Radzanowo, skrzyż. (nż)
<p class="blue bold">B</p> Wodzymin (nż)
<p class="blue bold">B</p>Rogozino, Płocka (nż)
<p class="blue bold">B</p> Rogozino, Wiejska (nż)
 <p class="blue bold">B</p> Rogozino, Mazowiecka (nż)
<p class="blue bold">B</p> Rogozino, szkoła (nż)
<p class="blue bold">B</p> Rogozino, Imielnicka (nż)
<p class="blue bold">B</p> Stróżewko, II (nż)
<p class="blue bold">B</p> Stare Boryszewo (nż)
<p class="blue bold">B</p> Nowe Boryszewo (nż)
 <p class="blue bold">B</p> Nowe Boryszewo, I (nż)
 <p class="blue bold">B</p> Nowe Boryszewo, Boryszewska (nż)
<p class="gmina bold">Gmina: Płock</p> 
 <p class="red bold">A</p> Otolińska, Boryszewo
<p class="red bold">A</p> Otolińska, WORD
 <p class="red bold">A</p> Kołłątaja
<p class="red bold">A</p> Stanisławówka 02
<p class="red bold">A</p> Piękna
 <p class="red bold">A</p> Jachowicza (teatr)
                    
                   
        
                    
<br>

 

Odnośnik do komentarza
Udostępnij na innych stronach

Ardex

(edytowane)

Tylko z numeru linii można usunąć diva. Rozkład jazdy nadal musi znajdować się w divie. Tylko ten select podmień na stary i tak, żeby każdy option miał klasę "_lnumer"

Edytowane przez Ardex
Odnośnik do komentarza
Udostępnij na innych stronach

adam2350

  • Autor
5 minut temu, Ardex napisał:

Tylko z numeru linii można usunąć diva. Rozkład jazdy nadal musi znajdować się w divie. Tylko ten select podmień na stary i tak, żeby każdy option miał klasę "_lnumer"

tj. ale nie działa 

Spoiler 

<select name="linia" >
			<option value="_l120" class="_l120">Linia 120</option>
		<option value="l121" class="_l121">Linia 121</option>
		
                        </select>
                        </label>
                        <div class="_l120">
                        <br>
                        <br>
                        <p class="red bold">Linia 120</p><b> Kierunek > Staroźreby</b> <br>
                    <p class="gmina bold">Gmina: Płock</p> 
                    <p class="red bold">A</p> Jachowicza (teatr) 
                    <p class="red bold">A</p> Piękna 
                    <p class="red bold">A</p> Stanisławówka 01 
                    <p class="red bold">A</p> Kołłątaja 
                    <p class="red bold">A</p> Otolińska, WORD 
                    <p class="red bold">A</p> Otolińska, Boryszewo
                    <p class="gmina bold">Gmina: Radzanowo</p>
 <p class="blue bold">B</p> Nowe Boryszewo, Boryszewska (nż)
<p class="blue bold">B</p> Nowe Boryszewo, I (nż)
<p class="blue bold">B</p>Nowe Boryszewo (nż)
<p class="blue bold">B</p> Stare Boryszewo (nż)
<p class="blue bold">B</p>Stróżewko, II (nż)
<p class="blue bold">B</p>Rogozino, szkoła (nż)
<p class="blue bold">B</p>Rogozino, Mazowiecka (nż)
<p class="blue bold">B</p> Rogozino, rondo (nż)
<p class="blue bold">B</p> Rogozino, Płocka (nż)
<p class="blue bold">B</p> Wodzymin (nż)
<p class="blue bold">B</p> Radzanowo, skrzyż. (nż)
<p class="blue bold">B</p> Radzanowo, Szkolna (nż)
<p class="blue bold">B</p>Woźniki, skrzyż. (nż)
<p class="blue bold">B</p> Woźniki-Paklewy, skrzyż. (nż)
                    <p class="gmina bold"> Gmina: Staroźreby</p>
 <p class="green bold">C</p> Smardzewo (nż)
 <p class="green bold">C</p> Opatówiec (nż)
  <p class="green bold">C</p> Staroźreby (nż)
                    
            <br>
            <br>
                        <p class="red bold">Linia 120</p><b> Kierunek > Jachowicza (teatr)
 </b> <br>

                <p class="gmina bold"> Gmina: Staroźreby</p>   
   <p class="green bold">C</p> Staroźreby (nż)
             <p class="green bold">C</p> Opatówiec (nż)
            <p class="green bold">C</p> Smardzewo (nż)


                    <p class="gmina bold">Gmina: Radzanowo</p>
 <p class="blue bold">B</p> Woźniki-Paklewy, skrzyż. (nż)
 <p class="blue bold">B</p> Woźniki, skrzyż. (nż)
<p class="blue bold">B</p> Radzanowo, Szkolna (nż)
 <p class="blue bold">B</p> Radzanowo, skrzyż. (nż)
<p class="blue bold">B</p> Wodzymin (nż)
<p class="blue bold">B</p>Rogozino, Płocka (nż)
<p class="blue bold">B</p> Rogozino, Wiejska (nż)
 <p class="blue bold">B</p> Rogozino, Mazowiecka (nż)
<p class="blue bold">B</p> Rogozino, szkoła (nż)
<p class="blue bold">B</p> Rogozino, Imielnicka (nż)
<p class="blue bold">B</p> Stróżewko, II (nż)
<p class="blue bold">B</p> Stare Boryszewo (nż)
<p class="blue bold">B</p> Nowe Boryszewo (nż)
 <p class="blue bold">B</p> Nowe Boryszewo, I (nż)
 <p class="blue bold">B</p> Nowe Boryszewo, Boryszewska (nż)
<p class="gmina bold">Gmina: Płock</p> 
 <p class="red bold">A</p> Otolińska, Boryszewo
<p class="red bold">A</p> Otolińska, WORD
 <p class="red bold">A</p> Kołłątaja
<p class="red bold">A</p> Stanisławówka 02
<p class="red bold">A</p> Piękna
 <p class="red bold">A</p> Jachowicza (teatr)
                    
                        </div>

 

Odnośnik do komentarza
Udostępnij na innych stronach

Ardex

(edytowane)

Wszystko masz w jednym divie, a każdy rozkład jazdy ma być w innym 

<select name="linia" >
			<option value="_l120" class="_l120">Linia 120</option>
		<option value="l121" class="_l121">Linia 121</option>
		
                        </select>
                        </label>
                        <div class="_t120">
                        <br>
                        <br>
                        <p class="red bold">Linia 120</p><b> Kierunek > Staroźreby</b> <br>
                    <p class="gmina bold">Gmina: Płock</p> 
                    <p class="red bold">A</p> Jachowicza (teatr) 
                    <p class="red bold">A</p> Piękna 
                    <p class="red bold">A</p> Stanisławówka 01 
                    <p class="red bold">A</p> Kołłątaja 
                    <p class="red bold">A</p> Otolińska, WORD 
                    <p class="red bold">A</p> Otolińska, Boryszewo
                    <p class="gmina bold">Gmina: Radzanowo</p>
 <p class="blue bold">B</p> Nowe Boryszewo, Boryszewska (nż)
<p class="blue bold">B</p> Nowe Boryszewo, I (nż)
<p class="blue bold">B</p>Nowe Boryszewo (nż)
<p class="blue bold">B</p> Stare Boryszewo (nż)
<p class="blue bold">B</p>Stróżewko, II (nż)
<p class="blue bold">B</p>Rogozino, szkoła (nż)
<p class="blue bold">B</p>Rogozino, Mazowiecka (nż)
<p class="blue bold">B</p> Rogozino, rondo (nż)
<p class="blue bold">B</p> Rogozino, Płocka (nż)
<p class="blue bold">B</p> Wodzymin (nż)
<p class="blue bold">B</p> Radzanowo, skrzyż. (nż)
<p class="blue bold">B</p> Radzanowo, Szkolna (nż)
<p class="blue bold">B</p>Woźniki, skrzyż. (nż)
<p class="blue bold">B</p> Woźniki-Paklewy, skrzyż. (nż)
                    <p class="gmina bold"> Gmina: Staroźreby</p>
 <p class="green bold">C</p> Smardzewo (nż)
 <p class="green bold">C</p> Opatówiec (nż)
  <p class="green bold">C</p> Staroźreby (nż)
</div>
            <br>
            <br>
                        <div class="_t121"><p class="red bold">Linia 121</p><b> Kierunek > Jachowicza (teatr)
 </b> <br>

                <p class="gmina bold"> Gmina: Staroźreby</p>   
   <p class="green bold">C</p> Staroźreby (nż)
             <p class="green bold">C</p> Opatówiec (nż)
            <p class="green bold">C</p> Smardzewo (nż)


                    <p class="gmina bold">Gmina: Radzanowo</p>
 <p class="blue bold">B</p> Woźniki-Paklewy, skrzyż. (nż)
 <p class="blue bold">B</p> Woźniki, skrzyż. (nż)
<p class="blue bold">B</p> Radzanowo, Szkolna (nż)
 <p class="blue bold">B</p> Radzanowo, skrzyż. (nż)
<p class="blue bold">B</p> Wodzymin (nż)
<p class="blue bold">B</p>Rogozino, Płocka (nż)
<p class="blue bold">B</p> Rogozino, Wiejska (nż)
 <p class="blue bold">B</p> Rogozino, Mazowiecka (nż)
<p class="blue bold">B</p> Rogozino, szkoła (nż)
<p class="blue bold">B</p> Rogozino, Imielnicka (nż)
<p class="blue bold">B</p> Stróżewko, II (nż)
<p class="blue bold">B</p> Stare Boryszewo (nż)
<p class="blue bold">B</p> Nowe Boryszewo (nż)
 <p class="blue bold">B</p> Nowe Boryszewo, I (nż)
 <p class="blue bold">B</p> Nowe Boryszewo, Boryszewska (nż)
<p class="gmina bold">Gmina: Płock</p> 
 <p class="red bold">A</p> Otolińska, Boryszewo
<p class="red bold">A</p> Otolińska, WORD
 <p class="red bold">A</p> Kołłątaja
<p class="red bold">A</p> Stanisławówka 02
<p class="red bold">A</p> Piękna
 <p class="red bold">A</p> Jachowicza (teatr)
                    
 </div>

Miałeś też dwa razy linie 120, zmieniłem tą drugą na 121. Jak teraz nie zadziała to bedę potrzebował demo, bo u mnie wszystko działa jak testuje.

@adam2350 jeszcze raz edytowałem kod, bo zobaczyłem, że zamiast _t masz _l pewnie dlatego nie działało. sprawdź teraz tym kodem

Edytowane przez Ardex
Odnośnik do komentarza
Udostępnij na innych stronach

adam2350

  • Autor
5 minut temu, Ardex napisał:

Wszystko masz w jednym divie, a każdy rozkład jazdy ma być w innym

  



<select name="linia" >
			<option value="_l120" class="_l120">Linia 120</option>
		<option value="l121" class="_l121">Linia 121</option>
		
                        </select>
                        </label>
                        <div class="_l120">
                        <br>
                        <br>
                        <p class="red bold">Linia 120</p><b> Kierunek > Staroźreby</b> <br>
                    <p class="gmina bold">Gmina: Płock</p> 
                    <p class="red bold">A</p> Jachowicza (teatr) 
                    <p class="red bold">A</p> Piękna 
                    <p class="red bold">A</p> Stanisławówka 01 
                    <p class="red bold">A</p> Kołłątaja 
                    <p class="red bold">A</p> Otolińska, WORD 
                    <p class="red bold">A</p> Otolińska, Boryszewo
                    <p class="gmina bold">Gmina: Radzanowo</p>
 <p class="blue bold">B</p> Nowe Boryszewo, Boryszewska (nż)
<p class="blue bold">B</p> Nowe Boryszewo, I (nż)
<p class="blue bold">B</p>Nowe Boryszewo (nż)
<p class="blue bold">B</p> Stare Boryszewo (nż)
<p class="blue bold">B</p>Stróżewko, II (nż)
<p class="blue bold">B</p>Rogozino, szkoła (nż)
<p class="blue bold">B</p>Rogozino, Mazowiecka (nż)
<p class="blue bold">B</p> Rogozino, rondo (nż)
<p class="blue bold">B</p> Rogozino, Płocka (nż)
<p class="blue bold">B</p> Wodzymin (nż)
<p class="blue bold">B</p> Radzanowo, skrzyż. (nż)
<p class="blue bold">B</p> Radzanowo, Szkolna (nż)
<p class="blue bold">B</p>Woźniki, skrzyż. (nż)
<p class="blue bold">B</p> Woźniki-Paklewy, skrzyż. (nż)
                    <p class="gmina bold"> Gmina: Staroźreby</p>
 <p class="green bold">C</p> Smardzewo (nż)
 <p class="green bold">C</p> Opatówiec (nż)
  <p class="green bold">C</p> Staroźreby (nż)
</div>
            <br>
            <br>
                        <div class="_l121"><p class="red bold">Linia 121</p><b> Kierunek > Jachowicza (teatr)
 </b> <br>

                <p class="gmina bold"> Gmina: Staroźreby</p>   
   <p class="green bold">C</p> Staroźreby (nż)
             <p class="green bold">C</p> Opatówiec (nż)
            <p class="green bold">C</p> Smardzewo (nż)


                    <p class="gmina bold">Gmina: Radzanowo</p>
 <p class="blue bold">B</p> Woźniki-Paklewy, skrzyż. (nż)
 <p class="blue bold">B</p> Woźniki, skrzyż. (nż)
<p class="blue bold">B</p> Radzanowo, Szkolna (nż)
 <p class="blue bold">B</p> Radzanowo, skrzyż. (nż)
<p class="blue bold">B</p> Wodzymin (nż)
<p class="blue bold">B</p>Rogozino, Płocka (nż)
<p class="blue bold">B</p> Rogozino, Wiejska (nż)
 <p class="blue bold">B</p> Rogozino, Mazowiecka (nż)
<p class="blue bold">B</p> Rogozino, szkoła (nż)
<p class="blue bold">B</p> Rogozino, Imielnicka (nż)
<p class="blue bold">B</p> Stróżewko, II (nż)
<p class="blue bold">B</p> Stare Boryszewo (nż)
<p class="blue bold">B</p> Nowe Boryszewo (nż)
 <p class="blue bold">B</p> Nowe Boryszewo, I (nż)
 <p class="blue bold">B</p> Nowe Boryszewo, Boryszewska (nż)
<p class="gmina bold">Gmina: Płock</p> 
 <p class="red bold">A</p> Otolińska, Boryszewo
<p class="red bold">A</p> Otolińska, WORD
 <p class="red bold">A</p> Kołłątaja
<p class="red bold">A</p> Stanisławówka 02
<p class="red bold">A</p> Piękna
 <p class="red bold">A</p> Jachowicza (teatr)
                    
 </div>

 

 

Miałeś też dwa razy linie 120, zmieniłem tą drugą na 121. Jak teraz nie zadziała to bedę potrzebował demo, bo u mnie wszystko działa jak testuje.

Odnośnik do komentarza
Udostępnij na innych stronach

Ardex

(edytowane)

trochę błędów było, naprawiłem wszystko. Popatrz na kod, przeanalizuj. Każdy rozkład jazdy ma być w innym divie z nazwa klasy o początku _t. Nazwy klas nie mogą się powtarzać, więc nawet do testów nie rób tak, że miałeś parę razy t_120 i l_120, każdy z tych numerów musi być uniwersalny

Edytowane przez Ardex
Odnośnik do komentarza
Udostępnij na innych stronach

Kontynuuj dyskusję

Dołącz do Pecetowicza, aby kontynuować dyskusję w tym wątku.

Zaloguj się
Zarejestruj się
Zadaj pytanie bez logowania
  • Dodaj nową pozycję...
  • Dodaj nową pozycję...