请教SELECT框的问题?急等 自己写的菜单控件才可以这样http://www.then9.com/soft1/508.htm 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 要不就只能像论坛里选头像那样,选了好以后改放在下拉菜单前面或后面的图片了。<img id="imgobj" src="http://img.2881.com/6/0.gif"><select name="type" onchange="imgobj.src='http://img.2881.com/6/'+this.value+'.gif';"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select> <title>自定?列表框</title><style>.selectDiv { border: 2px solid inset buttonface;}.optionDiv { border:1px solid black;border-top:0px;position:absolute;cursor:default;clip:rect(auto auto 0% auto);}.optionDiv div { font-size:11px;font-family:Tahoma;padding-left:8px;line-height:160%;background-color:white;}.optionDiv img { vertical-align: middle;margin-right:3px;}.defaultSelect { font-size:11px;font-family:Tahoma;padding-left:6px;border:1px solid white;cursor:default;}.defaultSelect img { vertical-align: middle;margin-right:3px;}.arrow { font-family:webdings;line-height:13px;border:2px outset buttonhighlight;background-color:buttonface;width:15px;text-align:center;cursor:default;font-size:8px;height:18px;}</style><body><span id="sel"></span><button style="font-family:Arial;font-size:10px;width:22px;height:18px;margin-top:4px;" onclick="putValue()">Go</button><SCRIPT LANGUAGE="JavaScript">//用??量var oWhere = document.getElementById("sel");//?示文字var OptionText = new Array();OptionText[0] = "--?秀网站--";OptionText[1] = "piggydesign.yeah.net";OptionText[2] = "?色理想";OptionText[3] = "PcHome.net";OptionText[4] = "Sina.com.cn";//?示?片var OptionImg = new Array();OptionImg[0] = "";OptionImg[1] = "";OptionImg[2] = new Image(),OptionImg[2].src="images/blueidea.gif";OptionImg[3] = new Image(),OptionImg[3].src="images/pchome.gif";OptionImg[4] = new Image(),OptionImg[4].src="images/sina.gif";var OptionValue = new Array();OptionValue[0] = "";OptionValue[1] = "about:blank";OptionValue[2] = "about:blank";OptionValue[3] = "about:blank";OptionValue[4] = "about:blank";//系??量var selectedOver = false;var selectedValue = 0;//下拉菜?主体var selectDiv = document.createElement("table");var selectDivTR = selectDiv.insertRow();var defaultValueTD = selectDivTR.insertCell();var arrow = selectDivTR.insertCell();with(selectDiv)cellSpacing=0,cellPadding=0,border=0,className="selectDiv";with(defaultValueTD)innerHTML = showOptionImg(1)+OptionText[0],className="defaultSelect";with(arrow)innerText=6,className="arrow";oWhere.appendChild(selectDiv);//外?Divvar optionDiv = document.createElement("div");//?置下拉菜???的坐?和?度with(optionDiv.style) { var select = selectDiv; var xy = getSelectPosition(select); pixelLeft = xy[0]; pixelTop = xy[1]+select.offsetHeight; optionDiv.className = "optionDiv";}//下拉菜?内容var Options = new Array();for (var i=0;i<OptionText.length;i++) { Options[i] = optionDiv.appendChild(document.createElement("div"));}for (i=0;i<Options.length;i++) { Options[i].innerHTML = showOptionImg(i)+OptionText[i]; Options[i].index = i;}oWhere.appendChild(optionDiv);//列表?度自??var SelectWidth = Options[0].offsetWidth+arrow.offsetWidth+8;selectDiv.style.width=SelectWidth;;optionDiv.style.width=SelectWidth;/*事件*///禁止??文本selectDiv.onselectstart = function() {return false;}optionDiv.onselectstart = function() {return false;}//下拉菜?的箭?arrow.onmousedown = function() { this.setCapture(); this.style.borderStyle="inset";}arrow.onmouseup = function() { event.cancelBubble = true; this.style.borderStyle="outset"; this.releaseCapture(); showHide();}document.onmouseup = function() { optionDiv.style.clip="rect(auto auto 0% auto)"; if(selectedOver) { with(defaultValueTD.style)background="",color=""; selectedOver=false; }}defaultValueTD.onmouseup = function() { event.cancelBubble = true; showHide();}//移?Option?的??效果for (i=0;i<Options.length;i++) { Options[i].attachEvent("onmouseover",function(){moveWithOptions("highlight","white")}); Options[i].attachEvent("onmouseout",function(){moveWithOptions("","")}); Options[i].attachEvent("onmouseup",selectedText);}function moveWithOptions(bg,color) { with(event.srcElement) { style.backgroundColor = bg; style.color = color; }}function selectedText() { event.cancelBubble=true; defaultValueTD.innerHTML = event.srcElement.innerHTML; with(defaultValueTD.style)background="highlight",color="white"; optionDiv.style.clip="rect(auto auto 0% auto)"; selectedOver = true; selectedValue = event.srcElement.index;}i = 0;/*通用函数*///?取?象坐?function getSelectPosition(obj) { var objLeft = obj.offsetLeft; var objTop = obj.offsetTop; var objParent = obj.offsetParent; while (objParent.tagName != "BODY") { objLeft += objParent.offsetLeft; objTop += objParent.offsetTop; objParent = objParent.offsetParent; } return([objLeft,objTop]);}function showOptionImg(index) { var imgSrc = OptionImg[index].src; if (imgSrc!=undefined) return("<img src="+OptionImg[index].src+">") else return("");}function dynamicOptions() { optionDiv.style.clip="rect(auto auto "+i+"% auto)",i=i+20; if(i<101) setTimeout("dynamicOptions()",5); else i=0;}function showHide() { with(optionDiv.style) { if (clip=="rect(auto auto 0% auto)"||clip=="") dynamicOptions(); else clip="rect(auto auto 0% auto)"; }}function putValue() { var url = OptionValue[selectedValue]; if (url) window.open(url)}</SCRIPT> 求《省市高中》《省市初中》联动控件,或者《省市高中》《省市初中》完整数据 求JS大虾,两个下拉列表的值比较。 如何在商城中对缺货的产品设置报警 window.open()传递的参数带加号怎么解决? 各位高手,请教问题! 一个表单中,有多个相同name的输入框,怎么去一一验证每个都不为空? 我想用HTML+JS开发Path应用的like按钮功能,怎么开发啊? 求救如何将左边的菜单树移动到右边并且也是以菜单树的形式显示,且可以删除 一页中有两个下拉框,如果右边的框里出现了这个数,左边就不显示怎么写! 如何动态删除一个option的所选项 轮换广告的实现? 求教:js 如何控制浏览器中的字体大小
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<style>
.selectDiv { border: 2px solid inset buttonface;}
.optionDiv { border:1px solid black;border-top:0px;position:absolute;cursor:default;clip:rect(auto auto 0% auto);}
.optionDiv div { font-size:11px;font-family:Tahoma;padding-left:8px;line-height:160%;background-color:white;}
.optionDiv img { vertical-align: middle;margin-right:3px;}
.defaultSelect { font-size:11px;font-family:Tahoma;padding-left:6px;border:1px solid white;cursor:default;}
.defaultSelect img { vertical-align: middle;margin-right:3px;}
.arrow { font-family:webdings;line-height:13px;border:2px outset buttonhighlight;background-color:buttonface;width:15px;text-align:center;cursor:default;font-size:8px;height:18px;}
</style>
<body>
<span id="sel"></span><button style="font-family:Arial;font-size:10px;width:22px;height:18px;margin-top:4px;" onclick="putValue()">Go</button>
<SCRIPT LANGUAGE="JavaScript">
//用??量
var oWhere = document.getElementById("sel");
//?示文字
var OptionText = new Array();
OptionText[0] = "--?秀网站--";
OptionText[1] = "piggydesign.yeah.net";
OptionText[2] = "?色理想";
OptionText[3] = "PcHome.net";
OptionText[4] = "Sina.com.cn";
//?示?片
var OptionImg = new Array();
OptionImg[0] = "";
OptionImg[1] = "";
OptionImg[2] = new Image(),OptionImg[2].src="images/blueidea.gif";
OptionImg[3] = new Image(),OptionImg[3].src="images/pchome.gif";
OptionImg[4] = new Image(),OptionImg[4].src="images/sina.gif";
var OptionValue = new Array();
OptionValue[0] = "";
OptionValue[1] = "about:blank";
OptionValue[2] = "about:blank";
OptionValue[3] = "about:blank";
OptionValue[4] = "about:blank";
//系??量
var selectedOver = false;
var selectedValue = 0;
//下拉菜?主体
var selectDiv = document.createElement("table");
var selectDivTR = selectDiv.insertRow();
var defaultValueTD = selectDivTR.insertCell();
var arrow = selectDivTR.insertCell();
with(selectDiv)cellSpacing=0,cellPadding=0,border=0,className="selectDiv";
with(defaultValueTD)innerHTML = showOptionImg(1)+OptionText[0],className="defaultSelect";
with(arrow)innerText=6,className="arrow";
oWhere.appendChild(selectDiv);
//外?Div
var optionDiv = document.createElement("div");
//?置下拉菜???的坐?和?度
with(optionDiv.style) {
var select = selectDiv;
var xy = getSelectPosition(select);
pixelLeft = xy[0];
pixelTop = xy[1]+select.offsetHeight;
optionDiv.className = "optionDiv";
}
//下拉菜?内容
var Options = new Array();
for (var i=0;i<OptionText.length;i++) {
Options[i] = optionDiv.appendChild(document.createElement("div"));
}
for (i=0;i<Options.length;i++) {
Options[i].innerHTML = showOptionImg(i)+OptionText[i];
Options[i].index = i;
}
oWhere.appendChild(optionDiv);
//列表?度自??
var SelectWidth = Options[0].offsetWidth+arrow.offsetWidth+8;
selectDiv.style.width=SelectWidth;;
optionDiv.style.width=SelectWidth;
/*事件*/
//禁止??文本
selectDiv.onselectstart = function() {return false;}
optionDiv.onselectstart = function() {return false;}
//下拉菜?的箭?
arrow.onmousedown = function() {
this.setCapture();
this.style.borderStyle="inset";
}
arrow.onmouseup = function() {
event.cancelBubble = true;
this.style.borderStyle="outset";
this.releaseCapture();
showHide();
}
document.onmouseup = function() {
optionDiv.style.clip="rect(auto auto 0% auto)";
if(selectedOver) {
with(defaultValueTD.style)background="",color="";
selectedOver=false;
}
}
defaultValueTD.onmouseup = function() {
event.cancelBubble = true;
showHide();
}
//移?Option?的??效果
for (i=0;i<Options.length;i++) {
Options[i].attachEvent("onmouseover",function(){moveWithOptions("highlight","white")});
Options[i].attachEvent("onmouseout",function(){moveWithOptions("","")});
Options[i].attachEvent("onmouseup",selectedText);
}
function moveWithOptions(bg,color) {
with(event.srcElement) {
style.backgroundColor = bg;
style.color = color;
}
}
function selectedText() {
event.cancelBubble=true;
defaultValueTD.innerHTML = event.srcElement.innerHTML;
with(defaultValueTD.style)background="highlight",color="white";
optionDiv.style.clip="rect(auto auto 0% auto)";
selectedOver = true;
selectedValue = event.srcElement.index;
}
i = 0;
/*通用函数*/
//?取?象坐?
function getSelectPosition(obj) {
var objLeft = obj.offsetLeft;
var objTop = obj.offsetTop;
var objParent = obj.offsetParent;
while (objParent.tagName != "BODY") {
objLeft += objParent.offsetLeft;
objTop += objParent.offsetTop;
objParent = objParent.offsetParent;
}
return([objLeft,objTop]);
}
function showOptionImg(index) {
var imgSrc = OptionImg[index].src;
if (imgSrc!=undefined)
return("<img src="+OptionImg[index].src+">")
else
return("");
}
function dynamicOptions() {
optionDiv.style.clip="rect(auto auto "+i+"% auto)",i=i+20;
if(i<101)
setTimeout("dynamicOptions()",5);
else
i=0;
}
function showHide() {
with(optionDiv.style) {
if (clip=="rect(auto auto 0% auto)"||clip=="")
dynamicOptions();
else
clip="rect(auto auto 0% auto)";
}
}
function putValue() {
var url = OptionValue[selectedValue];
if (url) window.open(url)
}
</SCRIPT>