Hallo allemaal,
Ik ben bezig om de Select Box die er in alle browsers verschillend uitziet te vervangen door onderstaande layout, maar loop tegen de volgende problemen aan.
- ik kan nu meerdere Select Boxen tegelijk openen.
- Bij meerdere Select Boxen onder elkaar lopen ze door elkaar heen.
Kunnen jullie mij helpen..
Zie voorbeeld:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml">;
<head>
<style type="text/css">
select {
display: block;
width: 111px;
}
select.replaced {
display: none;
}
ul.selectReplacement {
font-family: Arial, Helvetica, sans-serif;
background: url(top.jpg) top left no-repeat;
margin: 0;
padding: 0;
height: 18px;
width: 111px;
border: 1px solid #FE9B00;
position: absolute;
}
ul.selectReplacement li {
color: #FF0000;
cursor: pointer;
display: none;
font-size: 12px;
line-height: 18px;
list-style: none;
margin: 0;
padding: 1px 12px;
width: 87px;
background-color: #333399;
}
ul.selectOpen li {
display: block;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FE9B00;
border-right-color: #FE9B00;
border-bottom-color: #FE9B00;
border-left-color: #FE9B00;
margin-left: -1px;
}
ul.selectReplacement li.selected {
background: url(bottom.gif) bottom left no-repeat;
color: #FF0000;
display: block;
}
ul.selectOpen li.selected {
background: #0F1272;
display: block;
}
ul.selectOpen li:hover,
ul.selectOpen li.hover,
ul.selectOpen li.selected:hover {
background: #0F1272;
color: #FF0000;
}
</style>
<script type="text/javascript">
// <![CDATA[
function selectReplacement(obj) {
obj.className += ' replaced';
var ul = document.createElement('ul');
ul.className = 'selectReplacement';
var opts = obj.options;
for (var i=0; i<opts.length; i++) {
var selectedOpt;
if (opts[i].selected) {
selectedOpt = i;
break;
} else {
selectedOpt = 0;
}
}
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 = opts[i].index;
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.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, selIndex) {
var obj = document.getElementById(objID);
obj.selectedIndex = selIndex;
}
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();
}
// ]]>
</script>
</head>
<body>
<form>
<select id="something" name="something">
<option value="1">Dhr.</option>
<option value="2">Mevr.</option>
<option value="3">Telefoon</option>
<option value="4">Email</option>
<option value="5">Fax</option>
<option value="6">Post</option>
<option value="7">Dhr.</option>
<option value="8">Mevr.</option>
<option value="9">Telefoon</option>
<option value="10">Email</option>
<option value="11">Fax</option>
<option value="12">Post</option>
</select><br /><br />
Open beide in verschillende volgorde en zie wat er fout gaat.<br /><br />
<select id="something" name="something">
<option value="1">Dhr.</option>
<option value="2">Mevr.</option>
<option value="3">Telefoon</option>
<option value="4">Email</option>
<option value="5">Fax</option>
<option value="6">Post</option>
<option value="7">Dhr.</option>
<option value="8">Mevr.</option>
<option value="9">Telefoon</option>
<option value="10">Email</option>
<option value="11">Fax</option>
<option value="12">Post</option>
</select>
</form><br /><br />
Deze layout vervangt de orginele Select Box van de browser,<br />
maar ik kan ze beide tegelijk openen en ze lopen door elkaar heen.<br />
iemand een idee hoe ik dit kan oplossen (en nee ik wil ze niet naast elkaar zetten =).
</body>
</html>
966 views
