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

muxrwc 2007-01-18 02:09:21
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>SELECT菜单</title>
<style type="text/css">
* {
font-size:12px;
color:#999999;
}
div.Select_Menu {
width:0px;
height:16px;
float:none;
clear:both;
border:#CCCCCC 1px solid;
cursor:pointer;
}
div.Select_Left, div.Select_Right {
float:left;
clear:right;
}
div.Select_Left {
width:110px;
padding-top:1px;
padding-left:2px;
padding-right:2px;
}
div.Select_Right {
width:17px;
}
div.Select_Option {
visibility:hidden;
position:absolute;
border-left:#CCCCCC 1px solid;
border-right:#CCCCCC 1px solid;
border-bottom:#CCCCCC 1px solid;
cursor:pointer;
}
div.Select_Options {
background-color:#FFFFFF;
padding-top:2px;
padding-left:2px;
padding-right:2px;
}
</style>
<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.length方法
查看option个数
for in 可查看option元素集合，但是option是Object不是Array
*/
var onmouseDownObject;
var optionFontColor = ["#004080", "#999999"];
var optionBackGroundColor = ["#EEEEEE", "#FFFFFF"];
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.options[o.parent.selectedIndex], 0);
document.onmousedown = null;
}

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 = o.options[os.num].innerHTML;
o.objectInput.value = o.options[os.num].value;
}

function getObject(o, n) {
//根据值返回OPTION
var i = 0;
for (var item in o) {
if (item == "maxNum" || item == "length") continue;
if (i == n) return o[item];
i ++;
}
}

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;

if (this.deloptions.length == 0) {
o.num = this.options.maxNum ++;
} else {
o.num = this.deloptions.pop();
}

this.options[o.num] = o;

if (selected == true || this.options.length == 0)
setSelectIndex(this, o);

this.option.appendChild(o);
this.options.length ++;
};

var del = function (n) {
//删除OPTION
var o = getObject(this.options, n);
if ("undefined" == typeof o) return;
this.deloptions.push(o.num);
delete this.options[o.num];
this.option.removeChild(o);
this.options.length --;
};

var upselected = function (n) {
//修改SELECTED
var o = getObject(this.options, n);
if ("undefined" == typeof o) return;
setSelectIndex(this, o);
};

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

var out = function () {
//鼠标移开OPTION时
var root = this.parentNode.parent;
if (root.options[root.selectedIndex] != 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";
onmouseDownObject = o;
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.selectedIndex = null;
o.options = new Object();
o.deloptions = new Array();
o.options.maxNum = 0;
o.options.length = 0;
o.add = add;
o.del = del;
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");
wc1.del(2);
wc1.upselected(1);
wc2.add("scan", "菜单内容好多的说");
wc2.add("WC", "Name");
wc2.add(18, "Age", true);
window.status = wc1.options.length;
}

</script>
</head>
<body>
<form method="post" action="Server_Select.asp">
<center>
<div id="wc1"></div>
<div id="wc2"></div>
<input type="submit" value="提交" />
</center>
</form>
</body>
</html>
...全文
1315 27 打赏 收藏 转发到动态 举报
写回复
用AI写文章
27 条回复
切换为时间正序
请发表友善的回复…
发表回复
muxrwc 2007-05-21
  • 打赏
  • 举报
 回复
可以。。DEMO里有测试啊。。那个SELECT就是故意放那的。
稍微有点无敌 2007-05-21
  • 打赏
  • 举报
 回复
能不能挡住系统自带的下拉框？<select>
peterHunter 2007-01-22
  • 打赏
  • 举报
 回复
mark
muxrwc 2007-01-20
  • 打赏
  • 举报
 回复
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>
muxrwc 2007-01-20
  • 打赏
  • 举报
 回复
<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 setOptionXY(d) {
//设置下拉列表属性
var o = d.parent, o_top, o_bottom;
with (document.body) {
o_top = o.offsetTop - scrollTop; //距离上面高度
o_bottom = clientHeight - o.offsetTop - o.offsetHeight + scrollTop; //距离下面高度
if (o_top < o_bottom || d.offsetHeight < o_bottom) {
d.style.height = (d.offsetHeight < o_bottom ? d.offsetHeight : o_bottom - 5);
d.style.top = o.offsetTop + o.offsetHeight + "px";
d.style.borderTop = "0px";
d.style.borderBottom = "#CCCCCC 1px solid";
d.clickBoolean = "y < o.offsetTop || y > (os.offsetTop + os.offsetHeight)";
} else {
d.style.height = (d.offsetHeight < o_top ? d.offsetHeight : o_top - 5);
d.style.top = o.offsetTop - d.offsetHeight + "px";
d.style.borderBottom = "0px";
d.style.borderTop = "#CCCCCC 1px solid";
d.clickBoolean = "y < (o.offsetTop - os.offsetHeight) || y > (o.offsetTop + o.offsetHeight)";
}
d.style.left = o.offsetLeft + "px";
}
}

function createOption(o) {
//创建OPITON框
var d = document.createElement("div");
d.setAttribute("class", "Select_Option");
d.setAttribute("className", "Select_Option");
d.style.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.onmousedown = down;
return d;
}

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

function setSelectIndex(o) {
//设置selectIndex值
var root = o.parentNode.parent;
root.selectedObject = o;
root.seeObject = o;
root.childNodes[0].innerHTML = o.innerHTML;
root.objectInput.value = o.value;
}

function setStyle(o) {
//修改背景色和字颜色
var root = o.parentNode.parent;
if (root.seeObject != null) {
with (root.seeObject.style) {
color = optionFontColor[1];
backgroundColor = optionBackGroundColor[1];
}
}
if ("undefined" != typeof o) {
with (o.style) {
color = optionFontColor[0];
backgroundColor = optionBackGroundColor[0];
}
}
root.seeObject = o;
}

function setScroll(o) {
//设置显示时滚动条位置
if (o.options.length == 0) return;
o.option.scrollTop = o.selectedObject.num * o.options[0].offsetHeight;
}

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;
this.option.appendChild(o);
if (selected == true || o.num == 0) setSelectIndex(o);
};

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(options[1]);
else
setSelectIndex(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.options[n]);
};

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

var over = function () {
//鼠标经过OPTION时
setStyle(this);
};

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

var oDown = function () {
//当鼠标单击Select的时候，隐藏/显示菜单。
var o = this;
if (o.option.style.visibility != "visible") {
if ("undefined" != typeof onmouseDownObject && onmouseDownObject != o)
onmouseDownObject.option.style.visibility = "hidden";
o.option.style.visibility = "visible";
setOptionXY(o.option); //设置位置
setStyle(o.selectedObject); //设置背景色
setScroll(o); //设置滚动条位置
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 < o.offsetLeft || x > (o.offsetLeft + o.offsetWidth) || eval(os.clickBoolean)) {
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.seeObject = 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];
};
}
滚动条设置已经完成。。。。。。就差键盘啦。。^o^
muxrwc 2007-01-20
  • 打赏
  • 举报
 回复
滚动条已经处理完毕，不过好象取值不是很准确。。。麻烦各位前辈给看看怎么处理滚动条取值的问题。。。。。。
http://www.zhb.org.cn/wc/select/select.htm
btbtd 2007-01-19
  • 打赏
  • 举报
 回复
呵呵, 你还是多考虑一下效果与效率吧, 还有网络原因, 弄一个模拟搞这么多代码是太不值了, 俺都可以写一个不错的类了....
muxrwc 2007-01-19
  • 打赏
  • 举报
 回复
这个删除在修改下。
飘走先。。
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);
};
muxrwc 2007-01-19
  • 打赏
  • 举报
 回复
@_@
那么多功能呢啊。。寒了。。
把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>

这样的结构不用改动了吧。。。
先去工作。。。。有时间在做键盘和滚动条。。。
笨笨兔兔兔兔兔 2007-01-19
  • 打赏
  • 举报
 回复
简称wc算法。。。。。哈哈，名字不好
JK_10000 2007-01-19
  • 打赏
  • 举报
 回复

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

muxrwc 2007-01-19
  • 打赏
  • 举报
 回复
代码的确有点多。但是效率应该是不差劲，如果用数组会有下标的控制问题。。。
想想看还是改成数组吧。能省不少事呢。现在是修改selected时候查询所有，删除的时候还查询所有。改成数组的话只是删除的时候修改所有。。忽忽，这个还没有加滚动条的控制。。。
maximus_zhang 2007-01-19
  • 打赏
  • 举报
 回复
http://community.csdn.net/Expert/TopicView1.asp?id=5297241
muxrwc 2007-01-18
  • 打赏
  • 举报
 回复
算了，还是不改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;
}
这个函数到是可以修改下。
muxrwc 2007-01-18
  • 打赏
  • 举报
 回复
如果把options改成Array的话也许会省许多代码。。。
我去execute
muxrwc 2007-01-18
  • 打赏
  • 举报
 回复
嘿嘿，我感觉也有点多。。。挺郁闷，所以才希望指点偶下。。
尤其是控制options那里，Select的options是0-options.length
如果options用Array的话，那么删除后下标就会出现问题。并且，如果想实现0-options.length的话每删除的时候还需要遍例所以数组。这样效率感觉不是很好的说。
所以为了控制方便才加了个deloptions这样简短下标长度。。
btbtd 2007-01-18
  • 打赏
  • 举报
 回复
太过冗余,
CSS 前不要带标签名
还是觉得太过冗余, 前段时间俺写过一个, 不过俺不满意, 找时间俺再写一个
muxrwc 2007-01-18
  • 打赏
  • 举报
 回复
轻轻的UP小下。。。
fusoft 2007-01-18
  • 打赏
  • 举报
 回复
帮顶一下我的帖子吧,也是0分帖,无人问津,石沉大海

http://community.csdn.net/Expert/topic/5303/5303071.xml?temp=.4540674
fusoft 2007-01-18
  • 打赏
  • 举报
 回复
我也秀一个!

<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>
加载更多回复（7）
html+div+css初级入门到制作企业站视频课程
本套html,div&css;课程完全初级, 通过学习DIV+CSS, 了解分清html div css三者关联&作用, 通过一个企业站首页排版掌握html,div+css
模拟实现类select功能
模拟实现类select功能 项目背景 在具体开发过程中需要实现一个自定义生成table(将在后续文章中介绍），这篇文章主要展示这个类select下拉框功能。 功能简述 主要是点击按钮显示隐藏的div,在div内可以编辑内容，点击...
select表单元素详解及下拉列表模拟实现
→看过来写在前面select 是HTML表单元素中很常用的一个，其中很重要的几个属性常被忽略，但这几个属性却能帮助我们完成很多的功能，当然，select下拉列表默认样式很不友好，所以更多的时候可以自己模拟实现一个同样...
DIV对象如何不被select等控件挡住
在DHTML对象中，DIV对象如何不被select等控件挡住，请指点--------------------------------------------------------------------------------回复1：楼主指的是什么?DIV本来就是视觉虚无的~~~回复2：在IE中,select...
在React中实现用select标签进行联动切换效果。
select联动切换页面
JavaScript

87,909

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章