Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [jQuery] dynamiczny select - pojawiający się input
devurien
post 16.12.2009, 18:30:33
Post #1





Grupa: Zarejestrowani
Postów: 25
Pomógł: 0
Dołączył: 27.03.2008

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

Dzień dobry,

mamy sobie pole select (dynamiczne), ale ze stałą 1 opcją 'Other':

[HTML] pobierz, plaintext 
  1. <select>
  2.  <options>1</options>
  3.  <options>2</options>
  4.  <options>Other</options>
  5. </select>
[HTML] pobierz, plaintext

Teraz chciałbym uzyskać taki efekt, że automatycznie po wybraniu rzeczonego 'Other' pojawi się input.
O ile wiem jak to robić dla <a> to nie wiem jak sie dobrać do tego selecta - jak wyciągnąć wartość..
Czy mógłby ktoś rzucić jakimiś wskazówkami?
I co jeśli na stronie mam kilka takich selectów i chciałbym za każdym razem mieć inne name=""..

P.S Czemu jQuery - uważam, że jest najlepiej przyswajalne IMHO..smile.gif

Pozdrawiam.

Ten post edytował devurien 16.12.2009, 18:31:42
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 8)
seth-kk
post 16.12.2009, 19:16:10
Post #2





Grupa: Zarejestrowani
Postów: 444
Pomógł: 79
Dołączył: 26.05.2009

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

change()


--------------------
Krzysztof Kotlarski
Go to the top of the page
+Quote Post
devurien
post 16.12.2009, 19:54:57
Post #3





Grupa: Zarejestrowani
Postów: 25
Pomógł: 0
Dołączył: 27.03.2008

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

Super dziękuje bardzo o to mi właśnie chodziło !:)
Teraz przejdźmy do 2 części pytania w takim razie.

Jak już nadmieniłem chciałbym aby ta funkcja była w miarę uniwersalna - posłużę się przykładem:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  2.                     "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  6.  
  7.   <script>
  8.   $(document).ready(function(){
  9.  
  10.     $("select").change(function () {
  11.           var str = "";
  12.           $("select option:selected").each(function () {
  13.                     if ($(this).text() == 'Other') {
  14.                 str += "Other: <input name="+$(this).text() + "values= "+$(this).text;
  15.               }
  16.                         });
  17.           $("#copy").html(str);
  18.         })
  19.         .change();
  21.   });
  22.   </script>
  23.   <style>
  24.   div { color:red; }
  25.   </style>
  26. </head>
  27. <body>
  28.   <select name="sweets">
  29.     <option>Chocolate</option>
  30.     <option>Candy</option>
  31.     <option>Taffy</option>
  32.     <option>Caramel</option>
  33.     <option>Fudge</option>
  34.     <option>Other</option>
  35.   </select>
  36.   <p id="copy"><span></span></p>
  37.  
  38.       <select name="fruits">
  39.     <option>Orange</option>
  40.     <option>Plum</option>
  41.     <option>Plum</option>
  42.     <option>Cherry</option>
  43.     <option>Other</option>
  44.   </select>
  45.   <p id="copy"><span></span></p>
  46. </body>
  47. </html>
[HTML] pobierz, plaintext


Teraz jeśli posiadam 2 select w tym samym dokumencie, a są spójną logiczną częścią (name="fruits") - również z polem Others. Wszystko działa OK, ale wskakuję input do <p id=..> zdefiniowanego jako pierwszy - co jest logiczne.
Jak teraz mili moi zrobić aby za każdym razem wskakiwał do odpowiedniego id.
Każda zmian id niosła by ze sobą przeklepanie kodu jQuery na nowo i zmienianiu $("#copy").html(str); - jak tego uniknąć, to dodatkowy narzut obciążając dokument.
Dobrze by było aby wtedy name w inpucie zmieniało się na name selecta+$(this).text();

Ten post edytował devurien 16.12.2009, 19:57:07
Go to the top of the page
+Quote Post
seth-kk
post 16.12.2009, 21:08:45
Post #4





Grupa: Zarejestrowani
Postów: 444
Pomógł: 79
Dołączył: 26.05.2009

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

w html'u id nie moga sie powtarzac - zastap je klasami
[JAVASCRIPT] pobierz, plaintext 
  1. $('select').change(function(){
  2. str = $('option:selected', $(this)).text();
  3. $(this).next('p').html(str);
  4. });
[JAVASCRIPT] pobierz, plaintext

pisane z palca wiec moze zawierac literowki ale mysle ze obrazuje sytuacje


--------------------
Krzysztof Kotlarski
Go to the top of the page
+Quote Post
magnus
post 16.12.2009, 21:37:54
Post #5





Grupa: Zarejestrowani
Postów: 99
Pomógł: 15
Dołączył: 15.11.2007
Skąd: Nowogród Bobrz.

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

http://www.w3schools.com/jsref/dom_obj_select.asp

Czytaj, to nie boli biggrin.gif
this.name lub this.id zwrócą odpowiednie nazwy, których można potem użyć do określenia nazwy inputa (pod warunkiem, że są jakoś sensownie ponazywane).


--------------------
Efemental.pl - nasz punkt słyszenia :: recenzje :: tylko metal!
Opensource'owy klon Cantra: http://github.com/magnax/Simtr
Go to the top of the page
+Quote Post
devurien
post 16.12.2009, 22:35:28
Post #6





Grupa: Zarejestrowani
Postów: 25
Pomógł: 0
Dołączył: 27.03.2008

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

@seth-kk
Dziękuje jestem już coraz bliżej celu, efekt: http://tinyurl.com/yjmjz2y

Zrobiłem tak jak dałeś wskazówkę - po class :-), jednak mimo wyboru z drugiego selecta pola 'Other' wyskakuje mi name 1 selecta,
.next('p'); sprawdza się ale w momencie kiedy wybiorę już 'Other' w pierwszym selecie to podczas wyboru w 2 , następuje dubel:) - czyli powstają 2 inputy.

@magnus
A no nie boli, dołączę do linków smile.gif
Go to the top of the page
+Quote Post
seth-kk
post 16.12.2009, 23:07:51
Post #7





Grupa: Zarejestrowani
Postów: 444
Pomógł: 79
Dołączył: 26.05.2009

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

ehhh...
nie mieszaj tylko przypatrz sie mojemu ostatniemu przykladowi i zapomnij o pierwszym
wskazowka $('select') wewnatrz change() nadal wskazuje na oba selecty....


--------------------
Krzysztof Kotlarski
Go to the top of the page
+Quote Post
devurien
post 15.01.2010, 10:11:24
Post #8





Grupa: Zarejestrowani
Postów: 25
Pomógł: 0
Dołączył: 27.03.2008

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

[HTML] pobierz, plaintext 
  1.   $(document).ready(function(){
  2.  
  3.     $("select").change(function () {
  4.  
  5. 	str = $('option:selected', $(this)).text();
  6. 	clasName = $("select").attr("class");
  7.  
  8.           	$("select option:selected").each(function () {
  9. 			if (str == 'Other') {
  10.                			str += "<input name="+ clasName + str + " value= " + clasName +">";
  11.               		}
  12. 		});
  13.           	$(this).next('p').html(str);
  14. 		str.empty();
  15.  
  16.         }).change();
  17.  
  18.   });
[HTML] pobierz, plaintext

W zasadzie realizuje wszystkie założone kryteria (reakcja na kliknięcie na wartość 'Other', wyświetlanie w odpowiednich miejscach-next() ) poza wstawianiem złego atrybutu z selekta z którego pochodzi kliknięcie.
Bierze class="xx" - z każdym razem ten sam czyli 1.
Naprawdę nie wiem jak to ugryźć.. (próbowałem różne wariację z definiowanym na sztywno inputem i zwracaniem class etc, z funkcją empty etc.) :/


Ten post edytował devurien 15.01.2010, 10:12:34
Go to the top of the page
+Quote Post
kaminskp
post 6.01.2011, 23:25:38
Post #9





Grupa: Zarejestrowani
Postów: 98
Pomógł: 0
Dołączył: 18.03.2008
Skąd: Olsztyn

Ostrzeżenie: (20%)
X----

Poszukuje czegoś podobnego tylko select options wykorzystuje tabele w bazie mSQL
Go to the top of the page
+Quote Post
« Następny starszy · XML, AJAX · Następny nowszy »
 

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

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 25.07.2025 - 10:15
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn