Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][JavaScript][jQuery]Select zależny od div
Forum PHP.pl > Forum > Przedszkole
webmaniak
25.02.2013, 19:21:24
Witam,
mam pewien kod:
[HTML] pobierz, plaintext 
  1. <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
  2. <script src="http://code.jquery.com/jquery-migrate-1.1.0.min.js"></script>
  3. <form method="POST">
  4.  
  5.     <select id="wybor">
  6.         <option value="pierwszy">PHP</option>
  7.         <option value="drugi">JS</option>
  8.         <option value="trzeci">CSS</option>
  9.         <option value="czwarty">Ajax</option>
  10.         <option value="piaty">jQuery</option>
  11.     </select>    
  12.  
  13.  
  14. </form>
  15.  
  16. <div id="jezyk">
  17.     Ajax
  18. </div>
  19.  
  20.  
  21.  
  22.  
  23.  
  24. <script type="text/javascript">
  25.     $(document).ready(function() {
  26.         $('#jezyk').on('click', function() {
  27.             $('#wybor').val($('#jezyk').html());
  28.         })
  29.     });
  30. </script>
[HTML] pobierz, plaintext

Chciałbym aby po kliknięciu na element o id jezyk zmienił się select na wartość taką jaka jest w tym divie. W divie może być dowolna wartość z selecta, może też być to pusty element. Kod który przedstawiłem nie działa mi, nie zmienia nic, nie wiem czemu. Jestem zielony w jQuery i nie wiem jak sobie z tym poradzić. Pomoże ktoś?
bpskiba
25.02.2013, 20:31:54 
[HTML] pobierz, plaintext 
  1. <HTML>
  2. <body>
  3.  
  4.     <form method="POST">
  5.     <select id="wybor" onchange="kk(this)">
  6.     <option value="pierwszy">PHP</option>
  7.     <option value="drugi">JS</option>
  8.     <option value="trzeci">CSS</option>
  9.     <option value="czwarty">Ajax</option>
  10.     <option value="piaty">jQuery</option>
  11.     </select>
  12.    </form>
  13.  
  14.     <div id="jezyk">
  15.     Ajax
  16.     </div>
  17.  
  18. <script type="text/javascript">
  19. function kk(e)
  20.   {
  21.    switch(e.value)
  22.      {
  23.      case"pierwszy": document.getElementById("jezyk").innerHTML="PHP";
  24.                       break;
  25.      case"drugi": document.getElementById("jezyk").innerHTML="JS";
  26.                       break;
  27.      case"trzeci": document.getElementById("jezyk").innerHTML="CSS";
  28.                       break;
  29.      case"czwarty": document.getElementById("jezyk").innerHTML="Ajx";
  30.                       break;
  31.      case"piaty": document.getElementById("jezyk").innerHTML="jQuery";
  32.                       break;
  33.      }
  34.  }
  35.     </script>
  36. <body></HTML>
[HTML] pobierz, plaintext

Zrób mi przyjemność i zapomnij o istnieniu jquery............
webmaniak
25.02.2013, 20:53:48
Hmm, dzięki za odpowiedź i kod. Zrobiłeś ale odwrotnie, div zależny od select-był tak zatytułowany wątek-ale przez pomyłkę, dlatego zmieniłem smile.gif. Mi chodzi o zrobienie selecta zależnego od diva. No i druga uwaga, nie mogą to być statyczne elementy. Bo w divie jest tekst pobierany z bazy, a w select również z tej samej kolumny, ale wszystkie wiersze. Chodzi po prostu o to że jak kliknę na div to select ustawia się na np. na ajax i będzie filtrowało wyniki po tym wyborze. Filtrowanie zrobione, ale właśnie z tym divem i selectem nie umiem sobie poradzić.
A drugie pytanie: czemu zrezygnować z jQuery? jakiś argument lub link do artykułu/wpisu/argumentów przeciwko temu frameworkowi? Bo z moich informacji wynika że jest on rozwijany i coraz bardziej popularny.
foxbond
25.02.2013, 21:08:34
Kolega miał na myśli, że do tak prostych zadań nie trzeba includować frameworka...


W sumie to najlepiej zrób for-a po stronie php żeby generować tego switch-a i już masz dynamicznie. Możesz też przechowywać opcje wyboru w jakiejś zmiennej (która wygenerujesz po stronie php) i na niej sprawdzać
webmaniak
25.02.2013, 21:25:17
Cytat(foxbond @ 25.02.2013, 21:08:34 ) *
Kolega miał na myśli, że do tak prostych zadań nie trzeba includować frameworka...

Ok, będę pamiętał, tylko że w tym przypadku chce to zrobić w ramach już istniejącej aplikacji internetowej, gdzie jQuery jest używany w wielu miejscach.

Cytat(foxbond @ 25.02.2013, 21:08:34 ) *
W sumie to najlepiej zrób for-a po stronie php żeby generować tego switch-a i już masz dynamicznie.

nie za bardzo widzę to rozwiązanie z forem. Możesz pokazać jakiś przykład(pseudokod)?
Cytat(foxbond @ 25.02.2013, 21:08:34 ) *
Możesz też przechowywać opcje wyboru w jakiejś zmiennej (która wygenerujesz po stronie php) i na niej sprawdzać

Jedyne co w takiej opcji wchodzi w grę to sesja, ponieważ select znajduje się w innym pliku niż ten div(w aplikacji - bo przykład uprościłem trochę smile.gif )
Dlatego zależy mi na tym co napisałem - klikam i ustawia się select z wartością z diva.
bpskiba
25.02.2013, 21:44:31
Nie bardzo rozumiem jaki sens ma ta odwrotność. Przecież generując stronę zamiast wyświetlać "Ajax" możesz wstawić dowolną treść po stronie serwera.
Tutaj chyba php potrzeba a nie jquery czy js.

odwrotnie:

[HTML] pobierz, plaintext 
  1. <HTML>
  2. <body onload="kk()";>
  3.  
  4.     <form method="POST">
  5.     <select id="wybor">
  6.     <option value="pierwszy">PHP</option>
  7.     <option value="drugi">JS</option>
  8.     <option value="trzeci" selected>CSS</option>
  9.     <option value="czwarty">Ajax</option>
  10.     <option value="piaty">jQuery</option>
  11.     </select>
  12.    </form>
  13.     <div id="jezyk">
  14.     Ajax
  15.     </div>
  16.  
  17. <script type="text/javascript">
  18. function kk()
  19.   {
  20.   var e=document.getElementById("wybor");
  21.    switch(e.value)
  22.      {
  23.      case"pierwszy": document.getElementById("jezyk").innerHTML="PHP";
  24.                       break;
  25.      case"drugi": document.getElementById("jezyk").innerHTML="JS";
  26.                       break;
  27.      case"trzeci": document.getElementById("jezyk").innerHTML="CSS";
  28.                       break;
  29.      case"czwarty": document.getElementById("jezyk").innerHTML="Ajx";
  30.                       break;
  31.      case"piaty": document.getElementById("jezyk").innerHTML="jQuery";
  32.                       break;
  33.      }
  34.  }
  35.     </script>
  36. <body></HTML>
[HTML] pobierz, plaintext
webmaniak
26.02.2013, 08:51:27
Ok, to działa, ale cały czas nie o to mi chodzi. Chodzi o to że takich divów będzie mnóstwo. W tym przykładzie co podałeś select się zmienia po załadowaniu strony, w moim przypadku to odpada. Dlatego kombinuję w jQuery.

Bingo, to co potrzebuję:
http://jsfiddle.net/jchiotaka/uaLXU/
Oczywiście muszę to dostosować do swoich potrzeb, jeśli będę miał duże problemy to oczywiście skorzystam z Waszej dobroci(pomocy) smile.gif ale powinno pójść z górki teraz smile.gif
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.