Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] dynamiczny select - pojawiający się input
Forum PHP.pl > Forum > XML, AJAX
devurien
16.12.2009, 18:30:33
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.
seth-kk
16.12.2009, 19:16:10
change()
devurien
16.12.2009, 19:54:57
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();
seth-kk
16.12.2009, 21:08:45
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
magnus
16.12.2009, 21:37:54
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).
devurien
16.12.2009, 22:35:28
@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
seth-kk
16.12.2009, 23:07:51
ehhh...
nie mieszaj tylko przypatrz sie mojemu ostatniemu przykladowi i zapomnij o pierwszym
wskazowka $('select') wewnatrz change() nadal wskazuje na oba selecty....
devurien
15.01.2010, 10:11:24 
[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.) :/
kaminskp
6.01.2011, 23:25:38
Poszukuje czegoś podobnego tylko select options wykorzystuje tabele w bazie mSQL
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.