Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript]Zmiana wyglądu listy select
Forum PHP.pl > Forum > Przedszkole
Otto
Witam znalazłem taki skrypt który zmienia wygląd listy select jednak mam pewien problem gdyż pole select znika gdy kliknę na nie ( pojawia się poprawnie lista rozwijana ) i chcę żeby ono zostało na swoim miejscu zamiast znikać jednak nie znam się za bardzo na js więc niewiele mogę zdziałać ;/

  1. function selectReplacement(obj) {
  2. obj.className += ' replaced';
  3. var ul = document.createElement('ul');
  4. ul.className = 'selectReplacement';
  5. var opts = obj.options;
  6. var selectedOpt = (!obj.selectedIndex) ? 0 : obj.selectedIndex;
  7. for (var i=0; i<opts.length; i++) {
  8. var li = document.createElement('li');
  9. var txt = document.createTextNode(opts[i].text);
  10. li.appendChild(txt);
  11. li.selIndex = i;
  12. li.selectID = obj.id;
  13. li.onclick = function() {
  14. selectMe(this);
  15. };
  16. if (i == selectedOpt) {
  17. li.className = 'selected';
  18. li.onclick = function() {
  19. this.parentNode.className += ' selectOpen';
  20. this.onclick = function() {
  21. selectMe(this);
  22. };
  23. };
  24. }
  25. if (window.attachEvent) {
  26. li.onmouseover = function() {
  27. this.className += ' hover';
  28. };
  29. li.onmouseout = function() {
  30. this.className =
  31. this.className.replace(new RegExp(" hover\\b"), '');
  32. };
  33. }
  34. ul.appendChild(li);
  35. }
  36. obj.onfocus = function() {
  37. ul.className += ' selectFocused';
  38. };
  39. obj.onblur = function() {
  40. ul.className = 'selectReplacement';
  41. };
  42. obj.onchange = function() {
  43. var idx = this.selectedIndex;
  44. selectMe(ul.childNodes[idx]);
  45. };
  46. obj.onkeypress = obj.onchange;
  47. obj.parentNode.insertBefore(ul,obj);
  48. }
  49. function selectMe(obj) {
  50. var lis = obj.parentNode.getElementsByTagName('li');
  51. for (var i=0; i<lis.length; i++) {
  52. if (lis[i] != obj) {
  53. lis[i].className='';
  54. lis[i].onclick = function() {
  55. selectMe(this);
  56. };
  57. } else {
  58. setVal(obj.selectID, obj.selIndex);
  59. obj.className='selected';
  60. obj.parentNode.className =
  61. obj.parentNode.className.replace(new RegExp(" selectOpen\\b"), '');
  62. obj.onclick = function() {
  63. obj.parentNode.className += ' selectOpen';
  64. this.onclick = function() {
  65. selectMe(this);
  66. };
  67. };
  68. }
  69. }
  70. }
  71. function setVal(objID,val) {
  72. var obj = document.getElementById(objID);
  73. obj.selectedIndex = val;
  74. }
  75. function setForm() {
  76. var s = document.getElementsByTagName('select');
  77. for (var i=0; i<s.length; i++) {
  78. selectReplacement(s[i]);
  79. }
  80. }
  81. window.onload = function() {
  82. (document.all && !window.print) ? null : setForm();
  83. };


Listę wywołuję

  1. echo "<select id='ocena' name='ocena' tabindex='101'>";
  2. echo "<option value='1'>1</option>";
  3. echo "<option value='2'>2</option>";
  4. echo "<option value='3'>3</option>";
  5. echo "<option value='4'>4</option>";
  6. echo "<option value='5'>5</option>";
  7. echo "<option value='6'>6</option>";
  8. echo "<option value='7' selected>7</option>";
  9. echo "<option value='8'>8</option>";
  10. echo "<option value='9'>9</option>";
  11. echo "<option value='10'>10</option>";
  12. echo "</select>";


Style

  1. select.replaced {
  2. width: 1px;
  3. position: absolute;
  4. left: -999em;
  5. margin: 0px;
  6. }
  7.  
  8. ul.selectReplacement {
  9. background: url('images/select-top.jpg') top left no-repeat;
  10. margin: 0px;
  11. padding: 0;
  12. height: 15px;
  13. position: relative;
  14. }
  15.  
  16. ul.selectFocused {
  17. background-image: url('images/top-focus.jpg');
  18. }
  19.  
  20. ul.selectReplacement li {
  21. background: #0f0f0f;
  22. color: #989898;
  23. cursor: pointer;
  24. display: none;
  25. font-size: 11px;
  26. list-style: none;
  27. margin: 0;
  28. padding: 2 0 0 8px;
  29. width: 57px;
  30. height: 16px;
  31. }
  32.  
  33. ul.selectOpen {
  34. position: absolute;
  35. margin: 0;
  36. border: 1px solid #0f0f0f;
  37. }
  38.  
  39. ul.selectOpen li {
  40. display: block;
  41. }
  42.  
  43. ul.selectReplacement li.selected {
  44. background: url('images/select-bottom.png') bottom left no-repeat;
  45. color: #989898;
  46. display: block;
  47. }
  48.  
  49. ul.selectOpen li.selected {
  50. background: #262626;
  51. border: 0;
  52. display: block;
  53. }
  54.  
  55. ul.selectOpen li:hover,
  56. ul.selectOpen li.hover,
  57. ul.selectOpen li.selected:hover {
  58. background: #262626;
  59. color: #fff;
  60. }



~Refresh
Daje gdyż temat spadł na drugą stronę na którą mało kto wchodzi a nadal potrzebuję odpowiedzi...
erix
Cytat
gdyż pole select znika gdy kliknę na nie ( pojawia się poprawnie lista rozwijana ) i chcę żeby ono zostało na swoim miejscu zamiast znikać

Była kiedyś taka reklama modemów, z tekstem mniej więcej takim:

Mój zawiódł mnie dwa razy:
pierwszy raz, gdy zawiódł drugi raz,
drugi raz, gdy zawiódł mnie pierwszy raz.

Tak samo rozumiem zacytowane Twoje zdanie.
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.