Forum PHP.pl > Wczytywanie inputa do selecta

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Wczytywanie inputa do selecta

dag1980

18.03.2010, 11:50:51

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...

#luq

18.03.2010, 12:04:54

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ć.

dag1980

18.03.2010, 14:12:10

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 
<!DOCTYPE html>
<html>
<head>
  <style>
 
  p { color:blue; margin:8px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
 jQuery.noConflict();
 jQuery().ready(function() {  
    jQuery("#add").click(function () {
      var value =  jQuery("#tekst").val();
	  //jQuery("select").text(value);
	  jQuery("#select1").append(jQuery("#tekst").val() );
	  /// return !jQuery('#select1 option:selected').appendTo('#select1');  
     // jQuery("p").text(value);
    });
	});
</script>
 
</head>
<body>
	<input type="text" id="tekst" value="text"/>
	 <a href="#" id="add">add &gt;&gt;</a>
  <p></p>
 
<div>
  <select multiple id="select1">
    <option value="1">Option 1</option>
 
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
  </select>
 </div>
 
</body>
</html>
 
[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

#luq

18.03.2010, 19:03:07

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.

dag1980

19.03.2010, 07:04:31

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.

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.