rendered paste bodyvar open = false; function replaceSelectBoxes() { var selects = document.getElementsByTagName('select'); var suggest_box = document.getElementById('university_suggest'); var blank_suggest = document.getElementById('blank_suggest'); var hideOptions = function(el) { el.style.display = 'none'; el.style.zIndex = 0; } var showOptions = function(el) { el.style.display = 'block'; el.style.zIndex = 5; } var n = 0; for(var i = selects.length-1; i >= 0; i--) { var selected = selects[i].options[ selects[i].selectedIndex ].innerHTML; var newSelect = document.createElement('div'); newSelect.className = 'select_replacement'; newSelect.innerHTML = selected; newSelect.id = 'select_replacement_'+n; selects[i].parentNode.appendChild( newSelect ); var ol = document.createElement('ol'); ol.className = 'replacement_options'; ol.id = 'ol_'+newSelect.id; ol.style.width = (newSelect.offsetWidth-4) + 'px'; ol.style.left = selects[i].offsetLeft+'px'; ol.style.top = newSelect.offsetHeight + 'px'; var options = selects[i].getElementsByTagName('option'); var s = false; for(var x = 0; x < options.length; x++) { var li = document.createElement('li'); var a = document.createElement('a'); li.id = 'li_'+newSelect.id; a.id = 'a_'+newSelect.id; a.value = options[x].value; a.innerHTML = options[x].innerHTML; if(a.innerHTML == newSelect.innerHTML) { a.className = 'selected'; s = a; } addEvent(a, 'onmouseover', function(ev) { var e = window.event ? window.event : ev; var el = e.srcElement ? e.srcElement : e.target; s.className = ''; el.className = 'selected'; s = el; }); addEvent(a, 'onclick', function(ev) { var e = window.event ? window.event : ev; var el = e.srcElement ? e.srcElement : e.target; var rep = document.getElementById('hidden_'+newSelect.id); var ol = document.getElementById('ol_'+newSelect.id); rep.value = el.value; newSelect.innerHTML = el.innerHTML; hideOptions(ol); }); addEvent(document, 'onclick', function(ev) { var e = window.event ? window.event : ev; var el = e.srcElement ? e.srcElement : e.target; var pattern = /select_replacement_(\d+)/; var els = document.getElementsByTagName('ol'); if(el.tagName != 'OL' && el.className != 'replacement_options' && el.className != 'select_replacement') { for(var j = 0; j < els.length; j++) { if(els[j].className == 'replacement_options') { hideOptions(els[j]); } } } }); li.appendChild(a); ol.appendChild(li); } var clear = document.createElement('div'); clear.className = 'clear'; selects[i].parentNode.appendChild( ol ); selects[i].parentNode.appendChild( clear ); selects[i].style.display = 'none'; var hidden = document.createElement('input'); hidden.type = 'hidden'; hidden.value = selects[i].value; hidden.id = 'hidden_'+newSelect.id; hidden.name = selects[i].name; selects[i].parentNode.replaceChild(hidden, selects[i]); newSelect.onclick = function(ev) { var e = window.event ? window.event : ev; var el = e.srcElement ? e.srcElement : e.target; var ol = document.getElementById('ol_'+el.id); if(open) { hideOptions(open); } open = ol; showOptions(ol); } n++; } }