Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] Wybór diva z listboxa.
Forum PHP.pl > Forum > Przedszkole
Rewil
Potrzebuję coś takiego uzyskać że jak wybiorę z listboxa jakąś wartość to w zależności od niej wyświetli mi innego diva.(Ukryje jednego, pokaze drugiego)
  1. <script type="text/javascript">
  2. function Pole(document.baner_form.elements['kamp_nazwa'].value) {
  3. if (document.baner_form.elements['kamp_nazwa'].value=="HTML"){
  4. document.getElementById(file_html).style.display = "block";
  5. document.getElementById(file_obra).style.display = "none";
  6. }else{
  7. document.getElementById(file_html).style.display = "none";
  8. document.getElementById(file_obra).style.display = "block";
  9. }
  10.  
  11. }
  12. </script>
  13. <div class="file_wgr">
  14. <div class="file_1">Rodzaj:
  15. <select name="kamp_nazwa[]" size="1" onChange="jump(this.form)">
  16. <option value="Obrazek">Obrazek</option>
  17. <option value="Flash">Flash</option>
  18. <option value="HTML">HTML</option>
  19. </select>
  20. </div>
  21. <div id="file_obra" class="file_2">
  22. Obrazek:
  23. <input type="hidden" name="MAX_FILE_SIZE" value="3145728000" />
  24. <input type="file" size="36" class="file" name="kamp_obrazek[]" />
  25. </div>
  26. <div id="file_html" class="file_2">
  27. Kod HTML:
  28. <textarea name="kamp_kod[]"></textarea>
  29. </div>
  30. </div>
  31.  

I tak jak w tym wypadku: Wybierze się HTML to pokaże się Kod HTML, lub jeśli obrazek to się pokaża Obrazek.
Odrazu mówię że JS to narazie dla mnie czarna magia ;/.
yevaud
  1. <script type="text/javascript">
  2. function Pole(element) {
  3. if (element.value=="HTML"){
  4. document.getElementById('file_html').style.display = "block";
  5. document.getElementById('file_obra').style.display = "none";
  6. }else{
  7. document.getElementById('file_html').style.display = "none";
  8. document.getElementById('file_obra').style.display = "block";
  9. }
  10.  
  11. }
  12. <div class="file_wgr">
  13. <div class="file_1">Rodzaj:
  14. <select name="kamp_nazwa[]" size="1" onChange="Pole(this)">
  15. <option value="Obrazek">Obrazek</option>
  16. <option value="Flash">Flash</option>
  17. <option value="HTML">HTML</option>
  18. </select>
  19. </div>
  20. <div id="file_obra" class="file_2">
  21. Obrazek:
  22. <input type="hidden" name="MAX_FILE_SIZE" value="3145728000" />
  23. <input type="file" size="36" class="file" name="kamp_obrazek[]" />
  24. </div>
  25. <div id="file_html" class="file_2">
  26. Kod HTML:
  27. <textarea name="kamp_kod[]"></textarea>
  28. </div>
  29. </div>
  30.  
  31.  
Rewil
Jest już dobrze odnośnie listy, lecz potrzeba to jeszcze zglobalizować. Czyli do każdego pola się dotyczyło, a nie pierwszego ;]
http://gamingpl.com/test.html <- teraz tak jest.
yevaud
wtedy przede wszystkim nie mozesz uzywac ID bo powinno byc unikalne
zmien sobie id na name, sprawdz getElementsByName i kombinuj smile.gif
Rewil
Ale da się uzyskać to bez pętleń, tak jak do tej pory to działa ;]? Bo mając name="jakistam[]", to jest to samo co jakistam[1], jakistam[2] i tak caly czas. A w jsie, chyba tak ladnie tego nie odczyta.
yevaud
zauwaz ze to o czym mowisz, tak naprawde juz dziala
jedynym problemem teraz jest to, ze gdy juz chcesz schowac albo pokazac element, musisz wybrac ten wlasciwy div do pokazania ze zbioru file_html albo file_obra

popatrz co dokladnie dostaje teraz funkcja Pole i jak to wykorzystuje, zastanow sie czy jesli masz wiecej elementow to czy nie przydaloby sie cos jeszcze
kombinuj jak zmienic getElementById na getElementByName i ktory ze zbioru Elementsow wtedy pokazac

co do Twojego pytania, to nie potrzebujesz odczytywac wartosci w ten sposob jak podajesz bo ona juz jest odczytana dzieki "this", petla nie jest potrzebna
Rewil
Cytat(yevaud @ 19.06.2010, 20:28:24 ) *
zauwaz ze to o czym mowisz, tak naprawde juz dziala
jedynym problemem teraz jest to, ze gdy juz chcesz schowac albo pokazac element, musisz wybrac ten wlasciwy div do pokazania ze zbioru file_html albo file_obra

popatrz co dokladnie dostaje teraz funkcja Pole i jak to wykorzystuje, zastanow sie czy jesli masz wiecej elementow to czy nie przydaloby sie cos jeszcze
kombinuj jak zmienic getElementById na getElementByName i ktory ze zbioru Elementsow wtedy pokazac

co do Twojego pytania, to nie potrzebujesz odczytywac wartosci w ten sposob jak podajesz bo ona juz jest odczytana dzieki "this", petla nie jest potrzebna


  1. <script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
  2. <script type="text/javascript" src="lib/jquery/jquery-ui-1.7.2.custom.min.js"></script>
  3. <script type="text/javascript" src="jquery-dynamic-form.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6. $("#duplicate").dynamicForm("#plus", "#minus", {limit:50});
  7. });
  8.  
  9. function Pole(element) {
  10. if (element.value=="HTML"){
  11. document.getElementByName('file_html')[1].style.display = "block";
  12. document.getElementByName('file_obra')[1].style.display = "none";
  13. }else{
  14. document.getElementByName('file_html')[1].style.display = "none";
  15. document.getElementByName('file_obra')[1].style.display = "block";
  16. }
  17. }
  18. </script>
  19. <div class="box_trescadm">
  20. <div class="b_naglowek">Dodawanie banerów</div>
  21. <div class="tresc_wydawcy">
  22. <form enctype="multipart/form-data" action="admin.php?opcje=5" method="POST" enctype="multipart/form-data">
  23. <?include('admin/lista_kampani.php')?> <a id="plus" href="">Dodaj pole</a> <a id="minus" href="" style="display:none">Usuń ostatnie pole</a>
  24. <div id='duplicate'>
  25. <div class="file_wgr">
  26. <div class="file_1">Rodzaj:
  27. <select name="kamp_nazwa[]" size="1" onChange="Pole(this)">
  28. <option value="Obrazek">Obrazek</option>
  29. <option value="Flash">Flash</option>
  30. <option value="HTML">HTML</option>
  31. </select>
  32. </div>
  33. <div name="file_obra[1]" class="file_2">
  34. Obrazek:
  35. <input type="hidden" name="MAX_FILE_SIZE" value="3145728000" />
  36. <input type="file" size="36" class="file" name="kamp_obrazek[]" />
  37. </div>
  38. <div name="file_html[1]" class="file_2">
  39. Kod HTML:
  40. <textarea name="kamp_kod[]""></textarea>
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. <input type="submit" class="sub" name="wgraj" value="Dodaj" />
  46. </form>
  47. </div>
  48. </div>


Taki kod nie powinien działać na zasadzie jak z id? To znaczy że pierwsze orginalne divy się chowają, natomiast zduplikowane pozostają bez zmian?
yevaud
przede wszystkim getElementsByName
dlatego chcialem uzyc Name ze moze byc wiele elementow o tej samej nazwie na stronie, jesli dodajesz im indeksy to rownie dobrze moze byc to id

widze ze masz jquery, moze zamiast zwyklego javascript uzyjesz troche jego mocy ? smile.gif poczytaj o selektorach w jquery

[JAVASCRIPT] pobierz, plaintext
  1. function Pole(element) {
  2. var container = $(element).parents('div.file_wgr');
  3. if (element.value=="HTML"){
  4. $('div.file_html', container).show();
  5. $('div.file_obra', container).hide();
  6. } else {
  7. $('div.file_html', container).hide();
  8. $('div.file_obra', container).show();
  9. }
  10. }
[JAVASCRIPT] pobierz, plaintext


  1. <div class="file_wgr">
  2. <div class="file_1">Rodzaj:
  3. <select name="kamp_nazwa[]" size="1" onChange="Pole(this)">
  4. <option value="Obrazek">Obrazek</option>
  5. <option value="Flash">Flash</option>
  6. <option value="HTML">HTML</option>
  7. </select>
  8. </div>
  9. <div class="file_obra" class="file_2">
  10. Obrazek:
  11. <input type="hidden" name="MAX_FILE_SIZE" value="3145728000" />
  12. <input type="file" size="36" class="file" name="kamp_obrazek[]" />
  13. </div>
  14. <div class="file_html" class="file_2">
  15. Kod HTML:
  16. <textarea name="kamp_kod[]""></textarea>
  17. </div>
  18. </div>
Rewil
Raczkuje dopiero w tym JS'ie (Ale już dzięki takiej głupotce wiem coś tam więcej), dzięki wielkie za pomoc. ;]
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.