写了个DIV模拟SELECT，望各位老师指点。。。

只为，练习JS
但是，那个SELECT元素很有性格，有的时候有什么特殊的需求就做不到。。^o^

我也秀一个!<input type=text name=re_name style="width:100px;height:21px;font-size:10pt;"><span style="width:18px;border:0px solid red;"><select name="r00" style="margin-left:-100px;width:118px; background-color:#FFEEEE;" onChange="document.all.re_name.value=this.value;">
                <option value="1">11111111<option>
                <option value="2">222222</option>
                <option value="3">333333</option>
              </select>
              </span>

太过冗余,
CSS 前不要带标签名
还是觉得太过冗余, 前段时间俺写过一个, 不过俺不满意, 找时间俺再写一个

嘿嘿，我感觉也有点多挺郁闷，所以才希望指点偶下。。
尤其是控制options那里，Select的options是0-options.length
如果options用Array的话，那么删除后下标就会出现问题。并且，如果想实现0-options.length的话每删除的时候还需要遍例所以数组。这样效率感觉不是很好的说。
所以为了控制方便才加了个deloptions这样简短下标长度。。

如果把options改成Array的话也许会省许多代码
我去execute

算了，还是不改Array了改了Array下标就不好控制了。。
数组里有函数能获取自己的下标不？
function setSelectIndex(o, os) {
//设置selectIndex值
if (o.selectedIndex != null) {
setStyle(o.options[o.selectedIndex], 1);
}
o.selectedIndex = os.num;
setStyle(os, 0);
o.childNodes[0].innerHTML = os.innerHTML;
o.objectInput.value = os.value;
}
这个函数到是可以修改下。

http://community.csdn.net/Expert/TopicView1.asp?id=5297241

代码的确有点多。但是效率应该是不差劲，如果用数组会有下标的控制问题
想想看还是改成数组吧。能省不少事呢。现在是修改selected时候查询所有，删除的时候还查询所有。改成数组的话只是删除的时候修改所有。。忽忽，这个还没有加滚动条的控制

ie里，select虽说是个怪胎，可也有些地方值得学习：
tab键的应用
上下键的应用
键入第一个字母的查询
滚动条（楼主已知）

@_@
那么多功能呢啊。。寒了。。
把options改成数组了。。
哎。如果selectedIndex返回对象的话删除的时候就不用遍例了。
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function selectMenu() {
/*
DIV模拟SELECT菜单滚动条暂无处理
add方法添加div
然后修改div方法：
add方法：
添加option
add(value, innerHTML[, selected])
del方法
删除option
del(num)
upselected方法
修改当前selected为
upselected(num)
options
返回options数组
selectedIndex方法
返回selected元素下标
*/
var onmouseDownObject;
var optionFontColor = ["#004080", "#999999"];
var optionBackGroundColor = ["#EEEEEE", "#FFFFFF"];
var oldMouseDown, oldKeyDown;
var widthCZ = (/MSIE/.test(window.navigator.userAgent) ? 0 : 4);

function createSelect(o, name) {
var hidden = document.createElement("input");
var left = document.createElement("div");
var right = document.createElement("div");
var img = document.createElement("img");
if (/MSIE/.test(window.navigator.userAgent)) {
o.setAttribute("className", "Select_Menu");
left.setAttribute("className", "Select_Left");
right.setAttribute("className", "Select_Right");
} else {
o.setAttribute("class", "Select_Menu");
left.setAttribute("class", "Select_Left");
right.setAttribute("class", "Select_Right");
}
img.setAttribute("src", "select_Img.gif");
left.setAttribute("align", "center");
right.setAttribute("align", "right");
right.appendChild(img);
hidden.setAttribute("type", "hidden");
hidden.setAttribute("name", name);
o.appendChild(left);
o.appendChild(right);
o.appendChild(hidden);
o.objectInput = hidden;
if (o.childNodes.length == 4) o.removeChild(o.childNodes[0]);
}

function createOption(o) {
//创建OPITON框
var d = document.createElement("div");
d.setAttribute("class", "Select_Option");
d.setAttribute("className", "Select_Option");

with (d.style) {
left = document.body.scrollLeft + o.offsetLeft + "px";
top = document.body.scrollTop + o.offsetTop + o.offsetHeight + "px";
width = (/MSIE/.test(window.navigator.userAgent) ? o.offsetWidth : o.clientWidth) + "px";
}
d.parent = o;
return document.body.appendChild(d);
}

function createOptions(width) {
//创建OPITON元素框
var d = document.createElement("div");
d.setAttribute("class", "Select_Options");
d.setAttribute("className", "Select_Options");
d.style.color = optionFontColor[1];
d.style.width = width - widthCZ;
d.onmouseover = over;
d.onmouseout = out;
d.onmousedown = down;
return d;
}

function hiddenSelect(o) {
//隐藏菜单
o.style.visibility = "hidden";
setStyle(o.parent.selectedObject, 0);
document.onmousedown = oldMouseDown;
}

function setSelectIndex(o, os) {
//设置selectIndex值
if (o.selectedObject != null)
setStyle(o.selectedObject, 1);
o.selectedObject = os;
setStyle(os, 0);
o.childNodes[0].innerHTML = os.innerHTML;
o.objectInput.value = os.value;
}

function setStyle(o, n) {
//修改背景色和字颜色
if ("undefined" != typeof o) {
with (o.style) {
color = optionFontColor[n];
backgroundColor = optionBackGroundColor[n];
}
}
}

var add = function (value, text, selected) {
//执行创建option元素
var o = createOptions(this.option.clientWidth);
o.innerHTML = text;
o.value = value;
o.num = this.options.length;
this.options[o.num] = o;
if (selected == true || o.num == 0)
setSelectIndex(this, o);
this.option.appendChild(o);
};

var del = function (n) {
//删除OPTION
var options = this.options;
if (n > options.length - 1) return;
if (this.selectedObject == options[n] && options.length > 1)
setSelectIndex(this, options[0]);
for (var i = n + 1; i < options.length; i ++) options[i].num --;
this.option.removeChild(options[n]);
options.splice(n, 1);
};

var upselected = function (n) {
//修改SELECTED
if (n > this.options.length - 1) return;
setSelectIndex(this, this.options[n]);
};

var getSelectedIndex = function () {
//返回selectedIndex下标
return this.selectedObject.num;
}

var over = function () {
//鼠标经过OPTION时
setStyle(this.parentNode.parent.selectedObject, 1);
setStyle(this, 0);
};

var out = function () {
//鼠标移开OPTION时
if (this.parentNode.parent.selectedObject != this)
setStyle(this, 1);
};

var down = function () {
//当鼠标按下的时候付值并且隐藏菜单
setSelectIndex(this.parentNode.parent, this);
hiddenSelect(this.parentNode);
};

var oDown = function () {
//当鼠标单击Select的时候，隐藏/显示菜单。
var o = this;
if (o.option.style.visibility != "visible") {
o.option.style.visibility = "visible";
if ("undefined" != typeof onmouseDownObject && onmouseDownObject != o)
onmouseDownObject.option.style.visibility = "hidden";
onmouseDownObject = o;
oldMouseDown = document.onmousedown;
document.onmousedown = dDown;
} else hiddenSelect(o.option);
};

var dDown = function (e) {
//当鼠标单击别处的时候，隐藏菜单。
var o = onmouseDownObject, os = o.option;
var e = window.event || e;
var x = e.clientX + document.body.scrollLeft, y = e.clientY + document.body.scrollTop;
if (x < os.offsetLeft || x > (os.offsetLeft + os.offsetWidth) ||
y < (os.offsetTop - o.offsetHeight) || y > (os.offsetTop + os.offsetHeight))
hiddenSelect(o.option);
};

this.add = function (o, name) {
//创建SELECT菜单
createSelect(o, name);
o.style.width = (/MSIE/.test(window.navigator.userAgent) ? 127 : 131);
o.option = createOption(o);
o.selectedObject = null;
o.options = new Array();
o.add = add;
o.del = del;
o.selectedIndex = getSelectedIndex;
o.upselected = upselected;
o.onmousedown = oDown;
};

this.upFontColor = function (over, out) {
//修改 over && out 文字颜色
optionFontColor = [over, out];
};

this.upBackGroundColor = function (over, out) {
//修改 over && out 背景颜色
optionBackGroundColor = [over, out];
};
}
window.onload = function () {
var menu = new selectMenu;
var wc1 = $("wc1"), wc2 = $("wc2");
menu.add(wc1, "wc1");
menu.add(wc2, "wc2");
menu = null;
wc1.add("scan", "菜单内容好多的说");
wc1.add("WC", "Name");
wc1.add(18, "Age");
wc1.add("WC1", "Name1");
wc1.add(18.1, "Age1");
wc1.add("WC2", "Name2", true);
wc1.del(3);
wc1.del(3);
wc1.del(3);
wc1.upselected(1);
wc2.add("scan", "菜单内容好多的说");
wc2.add("WC", "Name");
wc2.add(18, "Age", true);
window.status = wc1.selectedIndex();
}
</script>这样的结构不用改动了吧
先去工作。有时间在做键盘和滚动条

这个删除在修改下。
飘走先。。
var del = function (n) {
//删除OPTION
var options = this.options;
if (n > options.length - 1) return;
if (this.selectedObject == options[n] && options.length > 1) {
if (n == 0)
setSelectIndex(this, options[1]);
else
setSelectIndex(this, options[0]);
}
for (var i = n + 1; i < options.length; i ++) options[i].num --;
this.option.removeChild(options[n]);
options.splice(n, 1);
};

window.onload = function () {
var menu = new selectMenu;
var wc1 = $("wc1"), wc2 = $("wc2");
menu.add(wc1, "wc1");
menu.add(wc2, "wc2");
menu = null;
wc1.add("SELECT", "菜单内容好多的说");
wc1.add("wc", "Name", true);
wc1.add(18, "Age");
wc1.add("a", "a");
wc1.add("b", "b");
wc1.add("c", "c");
wc1.add("d", "d");
wc1.add("e", "e");
wc1.add("f", "f");
wc1.add("g", "g");
wc1.add("h", "h");
wc1.add("i", "i");
wc1.add("j", "j");
wc1.add("k", "k");
wc1.add("l", "l");
wc1.add("m", "m");
wc1.add("n", "n");
wc1.add("o", "o");
wc1.add("p", "p");
wc1.add("q", "q");
wc1.add("r", "r");
wc1.add("s", "s");
wc1.add("t", "t");
wc1.add("u", "u");
wc1.add("v", "v");
wc1.add("w", "w");
wc1.add("x", "x");
wc1.add("y", "y");
wc1.add("z", "z");
wc1.add("A", "A");
wc1.add("B", "B");
wc1.add("C", "C");
wc1.add("D", "D");
wc1.add("E", "E");
wc1.add("F", "F");
wc1.add("G", "G");
wc1.add("H", "H");
wc1.add("I", "I");
wc1.add("J", "J");
wc1.add("K", "K");
wc1.add("L", "L");
wc1.add("M", "M");
wc1.add("N", "N");
wc1.add("O", "O");
wc1.add("P", "P");
wc1.add("Q", "Q");
wc1.add("R", "R");
wc1.add("S", "S");
wc1.add("T", "T");
wc1.add("U", "U");
wc1.add("V", "V");
wc1.add("W", "W");
wc1.add("X", "X");
wc1.add("Y", "Y");
wc1.add("Z", "Z");
/*wc1.del(3);
wc1.del(3);
wc1.del(3);
wc1.upselected(2);
wc1.del(0);
wc1.del(1);*/
wc2.add("scan", "菜单内容好多的说");
wc2.add("WC", "Name");
wc2.add(18, "Age", true);
window.status = wc1.selectedIndex();
}
</script>

滚动条已经处理完毕，不过好象取值不是很准确麻烦各位前辈给看看怎么处理滚动条取值的问题
http://www.zhb.org.cn/wc/select/select.htm

能不能挡住系统自带的下拉框？<select>

可以。。DEMO里有测试啊。。那个SELECT就是故意放那的。

调试易

写了个DIV模拟SELECT，望各位老师指点。。。

解决方案 »