[JavaScript]Zmiana wyglądu listy select Opcje

[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ć ;/

[PHP] pobierz, plaintext 
  function selectReplacement(obj) {
      obj.className += ' replaced';
      var ul = document.createElement('ul');
      ul.className = 'selectReplacement';
      var opts = obj.options;
      var selectedOpt = (!obj.selectedIndex) ? 0 : obj.selectedIndex;
      for (var i=0; i<opts.length; i++) {
        var li = document.createElement('li');
        var txt = document.createTextNode(opts[i].text);
        li.appendChild(txt);
        li.selIndex = i;
        li.selectID = obj.id;
        li.onclick = function() {
          selectMe(this);
        };
        if (i == selectedOpt) {
          li.className = 'selected';
          li.onclick = function() {
            this.parentNode.className += ' selectOpen';
            this.onclick = function() {
              selectMe(this);
            };
          };
        }
        if (window.attachEvent) {
          li.onmouseover = function() {
            this.className += ' hover';
          };
          li.onmouseout = function() {
            this.className = 
              this.className.replace(new RegExp(" hover\\b"), '');
          };
        }
        ul.appendChild(li);
      }
      obj.onfocus = function() {
        ul.className += ' selectFocused';
      };
      obj.onblur = function() {
        ul.className = 'selectReplacement';
      };
      obj.onchange = function() {
        var idx = this.selectedIndex;
        selectMe(ul.childNodes[idx]);
      };
      obj.onkeypress = obj.onchange;
      obj.parentNode.insertBefore(ul,obj);
    }
    function selectMe(obj) {
      var lis = obj.parentNode.getElementsByTagName('li');
      for (var i=0; i<lis.length; i++) {
        if (lis[i] != obj) {
          lis[i].className='';
          lis[i].onclick = function() {
            selectMe(this);
          };
       } else {
          setVal(obj.selectID, obj.selIndex);
          obj.className='selected';
          obj.parentNode.className = 
            obj.parentNode.className.replace(new RegExp(" selectOpen\\b"), '');
          obj.onclick = function() {
            obj.parentNode.className += ' selectOpen';
            this.onclick = function() {
              selectMe(this);
            };
          };
        }
      }
    }
    function setVal(objID,val) {
      var obj = document.getElementById(objID);
      obj.selectedIndex = val;
    }
    function setForm() {
      var s = document.getElementsByTagName('select');
      for (var i=0; i<s.length; i++) {
        selectReplacement(s[i]);
      }
    }
    window.onload = function() {
      (document.all && !window.print) ? null : setForm();
    };
[PHP] pobierz, plaintext 

Listę wywołuję

[PHP] pobierz, plaintext 
	echo "<select id='ocena' name='ocena' tabindex='101'>";
		echo "<option value='1'>1</option>";
		echo "<option value='2'>2</option>";
		echo "<option value='3'>3</option>";
		echo "<option value='4'>4</option>";
		echo "<option value='5'>5</option>";
		echo "<option value='6'>6</option>";
		echo "<option value='7' selected>7</option>";
		echo "<option value='8'>8</option>";
		echo "<option value='9'>9</option>";
		echo "<option value='10'>10</option>";
	echo "</select>";
[PHP] pobierz, plaintext 

Style

[HTML] pobierz, plaintext 
select.replaced {
	width: 1px;
	position: absolute;
	left: -999em;
	margin: 0px;
}
 
ul.selectReplacement {
	background: url('images/select-top.jpg') top left no-repeat;
	margin: 0px;
	padding: 0;
	height: 15px;
	position: relative;
}
 
ul.selectFocused {
	background-image: url('images/top-focus.jpg');
}
 
ul.selectReplacement li {
	background: #0f0f0f;
	color: #989898;
	cursor: pointer;
	display: none;
	font-size: 11px;
	list-style: none;
	margin: 0;
	padding: 2 0 0 8px;
	width: 57px;
	height: 16px;
}
 
ul.selectOpen {
	position: absolute;
	margin: 0;
	border: 1px solid #0f0f0f;
}
 
ul.selectOpen li {
	display: block;
}
 
ul.selectReplacement li.selected {
	background: url('images/select-bottom.png') bottom left no-repeat;
	color: #989898;
	display: block;
}
 
ul.selectOpen li.selected {
	background: #262626;
	border: 0;
	display: block;
}
 
ul.selectOpen li:hover,
ul.selectOpen li.hover,
ul.selectOpen li.selected:hover {
	background: #262626;
	color: #fff;
}
[HTML] pobierz, plaintext 

~Refresh
Daje gdyż temat spadł na drugą stronę na którą mało kto wchodzi a nadal potrzebuję odpowiedzi...

Ten post edytował Otto 21.03.2011, 00:25:37

[erix]

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.