Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML] pole formularza
Forum PHP.pl > Forum > Przedszkole
eska97
Jak zrobić takie pole w formularzu?
Tomplus
Notepad++ ?

Kod
<select multiple>
  <option value="php">.php</option>
  <option value="html">.html</option>
  <option value="js">.js</option>
  <option value="json">.json</option>
</select>



A aby działało tak samo, to przydałoby się zastosować funkcje Javy Script które będą zaznaczony Option przenosić do drugiego Selecta.
eska97
Napisałem sobie coś takiego.
  1. <form id="form" action="?step=2" method="POST">
  2. <table border="0"><tr><td><select id="sel1" style="width: 200px; height:400px;" multiple>
  3. <option value="php">.php</option>
  4. <option value="html">.html</option>
  5. <option value="js">.js</option>
  6. <option value="json">.json</option>
  7. </select></td><td>
  8. <button type="button" onclick="addOption()">-></button><br>
  9. <button type="button" onclick="remOption()"><-</button>
  10. </td><td>
  11. <select id="sel2" style="width: 200px; height:400px;" multiple name="sel2[]">
  12. </td></tr><table><input onclick="send()" type="button" value="Zatwierdź"></form>
  13. <script>function addOption() {
  14. do{
  15. var sel1 = document.getElementById("sel1");
  16. var sel2 = document.getElementById("sel2");
  17. var option = document.createElement("option");
  18. var selected = sel1.selectedIndex;
  19. var options = sel1.options;
  20. option.text = options[selected].text;
  21. sel1.remove(options[selected].index);
  22. sel2.add(option);}
  23. while(sel1.selectedIndex!=="");
  24. }function remOption() {
  25. do{
  26. var sel1 = document.getElementById("sel1");
  27. var sel2 = document.getElementById("sel2");
  28. var option = document.createElement("option");
  29. var selected = sel2.selectedIndex;
  30. var options = sel2.options;
  31. option.text = options[selected].text;
  32. sel1.add(option);
  33. sel2.remove(options[selected].index);}
  34. while(sel2.selectedIndex!=="");
  35. }
  36. function send()
  37. {
  38. var selObj = document.getElementById("sel2");
  39. for (var i=0; i<selObj.options.length; i++) {
  40. selObj.options[i].selected = true;
  41. }
  42. document.getElementById("form").submit();
  43. }

Tak, Notepad++. Tutaj znalazłem takiego selecta do przykładu najszybciej. 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.