Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Wczytywanie inputa do selecta
dag1980
post 18.03.2010, 11:50:51
Post #1





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 21.07.2009

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

Witam, Powiedźcie mi jak robić za pomocą ajax'a taki efekt: Mam pole input i po kliknięciu na buttona, zawartośc tego inputa dodawana jest do pola select.
Znalazłem skrypt który mniej więcej tak działa tylko że na dwóch selectach Przykład
Pomożecie...
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 4)
#luq
post 18.03.2010, 12:04:54
Post #2





Grupa: Zarejestrowani
Postów: 589
Pomógł: 91
Dołączył: 22.05.2008
Skąd: Gliwice

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

A w jakim celu chcesz tu Ajax`a zastosować?

Teoretycznie musisz to zrobić tak:
- zdarzenie kliknięcia na button wywołuje funkcję, która dodaje do elementu select stworzony w skrypcie nowy element option z danych z input następnie czyści value tegoż inputa...

W jQuery to jest 5 min pisania, ale jeśli piszesz taki topic to podejrzewam, że czystego JS`a nie znasz. Możesz ten skrypt napisać z wykorzystaniem jQ, znajdź jakiś kursik otworzysz manual i w godzine powinieneś do tego dojść jak to się obsługuję, na przyszłość poczytaj o gołym JavaScripti`ie i zacznij się go uczyć.

Ten post edytował #luq 18.03.2010, 12:05:22


--------------------
Moja gra - scraby.io
Go to the top of the page
+Quote Post
dag1980
post 18.03.2010, 14:12:10
Post #3





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 21.07.2009

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

Chce ażeby to działało bez przeładowania strony. Ma to wyglądać w ten sposób ze osoba wpisuje coś w inputa, klika na buttona "dodaj" i on dodaje zawartość inputa do selecta, i może wykonać ta operacje kilka krotnie, więc beż sensu by było gdyby za każdym razem przeładowywała się strona.

Wykombinowałem takie coś

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <style>
  5.  
  6.   p { color:blue; margin:8px; }
  7.   </style>
  8.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  9.   <script>
  10.  jQuery.noConflict();
  11.  jQuery().ready(function() {  
  12.     jQuery("#add").click(function () {
  13.       var value =  jQuery("#tekst").val();
  14. 	  //jQuery("select").text(value);
  15. 	  jQuery("#select1").append(jQuery("#tekst").val() );
  16. 	  /// return !jQuery('#select1 option:selected').appendTo('#select1');  
  17.      // jQuery("p").text(value);
  18.     });
  19. 	});
  20. </script>
  21.  
  22. </head>
  23. <body>
  24. 	<input type="text" id="tekst" value="text"/>
  25. 	 <a href="#" id="add">add &gt;&gt;</a>
  26.   <p></p>
  27.  
  28. <div>
  29.   <select multiple id="select1">
  30.     <option value="1">Option 1</option>
  31.  
  32.     <option value="2">Option 2</option>
  33.     <option value="3">Option 3</option>
  34.     <option value="4">Option 4</option>
  35.   </select>
  36.  </div>
  37.  
  38. </body>
  39. </html>
  40.  
[HTML] pobierz, plaintext


Dodaje mi nową pozycje ale przy następnym razie dołącza tekst do ostatniej pozycji.

Tak to mniej więcej wygląda po dodaniu trzech słów 'text'
Option 1
Option 2
Option 3
Option 4
texttexttext
Go to the top of the page
+Quote Post
#luq
post 18.03.2010, 19:03:07
Post #4





Grupa: Zarejestrowani
Postów: 589
Pomógł: 91
Dołączył: 22.05.2008
Skąd: Gliwice

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

Mylisz pojęcia... Ty potrzebujesz JS`a a nie Ajax`a. Czym dokładnie jest JavaScript możesz przeczytać na moim blogu, dokładniej tutaj

Zmierzając do meritum. Twój kod JavaScript powinien wyglądać tak:
Kod
$(document).ready(function(){
    $( '#add' ).click(function () {
        var value =  $( '#tekst' ).val();
        $( '#select1' ).append( '<option value="">' + value + '</option>' );

                // pytanie co chcesz miec w value?
                // Pewno kolejna liczbe, jesli tak to chyba nie bedziesz mial z tym problemu
    });
});


Twój problem polegał na dodaniu tekstu do tego selecta a nie nowego elementu option.

@ Edit
Aha, na przyszłość, polecam się zaopatrzyć się w plugina do Firefoxa o nazwie Firebug, genialne narzędzie przy pracy z JavaScriptem jak i zresztą kilku innych spraw. Gdybyś go miał w sekund 5 wiedział być czemu Twój kod nie śmiga.

Ten post edytował #luq 18.03.2010, 19:06:45


--------------------
Moja gra - scraby.io
Go to the top of the page
+Quote Post
dag1980
post 19.03.2010, 07:04:31
Post #5





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 21.07.2009

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

Dokładnie o to chodziło, Jak widać jestem początkujący w tej dziedzinie, wiedziałem gdzie dzwoni ale nie wiedziałem w jakim kościele.
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: 19.07.2025 - 15:08
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn