打印

select发展史

marvellous [楼主]

金翅擘海

荣誉管理团队

帖子: 13287
体力: 27867
威望: 143
当前: 北京朝阳区

1^# 大中小发表于 2006-3-24 15:29

本文旨在大家对select和模拟select有一个全面地了解,使此项技术能发挥出更高的水平。
最初的select的确很平淡,就是一个下拉选项列表:

提示：您可以先修改部分代码再运行

日久天长之后,人们对select要求高了,要修一修边幅:

<br><br>
<script>
i=1;
</script>
<center>
<form name="form1">
  <select name="select01">
    <option>11111 111111 111111111111</option>
    <option>2222222</option>
    <option>333333</option>
    <option>4444444</option>
  </select>
<span style="position:relative;left:-23px;width:17px;height:17px;font:7px 'wingdings 3';color:#cc0000;background:cyan;border:2px outset;text-align:center;padding-top:3px;cursor:default" onclick="if(i>=document.form1.select01.options.length){i=0}document.form1.select01.options[i].selected=true;i++">q
<iframe src="" style="position:absolute;top:0;left:0;z-index:-1; width:15px;height:15px;filter:alpha(opacity=0))" frameborder="0"></iframe>
</span>
</form>
<br><br><br>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.table1{background-color:white;FONT-FAMILY: Courier New, Courier;font-size:12px}
.td_out{FONT-FAMILY: Courier New, Courier;font-size:12px;color:#000000;height:15px;border:1 solid #ffffff;}
.td_over{FONT-FAMILY: Courier New, Courier;font-size:12px;cursor:default;background-color:#3366cc;border:1 solid #000000;color:#ffffff;height:15px}
.slv{vertical-align:bottom;FONT-FAMILY: Courier New, Courier;font-size:12px;border-left-width:0;border-top-width:0;border-bottom-width:0;border-right:0 solid #000000;vertical-align:middle;height:18px;color:#000000;}
.down{position:relative;left:-2px;font-size:11px;vertical-align:middle;width:16;height:16;color:#2050b0;background-color:#D0DFF7;border:1 solid #9fA3Ce;writing-mode:tb-rl;font-weight:bold;
}
.seldiv{
position:absolute;z-index:1000;overflow-x:hidden;border-left:1 solid #000000;border-bottom:1 solid #000000;border-right:1 solid #000000;
SCROLLBAR-FACE-COLOR: #d0dff7; 
SCROLLBAR-HIGHLIGHT-COLOR: #d0dff7; 
SCROLLBAR-SHADOW-COLOR: #FFFFFF; 
SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; 
SCROLLBAR-ARROW-COLOR: #ffffff; 
SCROLLBAR-TRACK-COLOR: #ffffff; 
SCROLLBAR-DARKSHADOW-COLOR: #d0dff7;}
</style>
<script language="JavaScript">
document.onclick=hiddenDiv;
function getDivCount() {
 var arr=document.all; 
 re=0;
 for (i=0;i<arr.length;i++) {
  str=arr[i].id;  
  if (str.indexOf("ZfDiv_")==0) {   
   re++;  
  }
 } 
 return re;
}
function getI(ObjId) {//取得objId的最后一位数字
 for (i=0;i<ObjId.length;i++) {
  if (ObjId.charAt(i)=="_") return ObjId.substr(i+1,ObjId.length-1);
 }
 return 0;
}
function select_edit(TextObj){//鼠标经过高亮度 
 TextObj.focus();TextObj.select();
}
function checkValue(ID){   
 var sl=document.all["ZfText_"+ID]; 
 var sv=document.all["ZfDiv_"+ID];
 var da=document.all["ZfData_"+ID];   
 sv.style.display=''
 
 for(i=0;i<da.rows.length;i++)da.rows[i].style.display=''
 
 for(i=0;i<da.rows.length;i++){
  if(da.rows[i].cells[0].innerText.indexOf(sl.value)!=0)da.rows[i].style.display='none';
  getPosition(ID);
 } 
}
function getL(e){
 var l=e.offsetLeft;
 while(e=e.offsetParent){
  l+=e.offsetLeft;
 }
 return l
}
function getT(e){
 var t=e.offsetTop;
 while(e=e.offsetParent){
  t+=e.offsetTop;
 }
 return t
}
function getPosition(ID){ 
 var sv=document.all["ZfDiv_"+ID];
 var sl=document.all["ZfText_"+ID];
 var spn=document.all["ZfSpan_"+ID];
 var da=document.getElementById("ZfData_"+ID);
 sv.style.pixelWidth=spn.offsetWidth;
 da.style.pixelWidth=sv.offsetWidth;
 sv.style.pixelLeft=getL(spn);
 sv.style.pixelTop=getT(spn)+sl.offsetHeight+3;
 if(da.offsetHeight>200){
  sv.style.pixelHeight=200;
  sv.style.overflowY='scroll';
 }
 else {
  sv.style.pixelHeight=da.offsetHeight;
  sv.style.overflowY='hidden';
 }
}
function dropDown(ID){ 
 var sv=document.all["ZfDiv_"+ID]
 var tb=document.all["ZfData_"+ID]
 
 if(sv.style.display=='none'){  
  sv.style.display='';  
  for(i=0;i<tb.rows.length;i++)tb.rows[i].style.display=''
  getPosition(ID);  
 } else {  
  sv.style.display='none';
 }
}//下拉摸拟层
function hiddenDiv(){
 var o=window.event.srcElement.id;
 var tb 
 var sv 
 if(o=="") {
  for (j=0;j<getDivCount();j++) {
   tb=document.getElementById('ZfData_'+j);
   sv=document.getElementById('ZfDiv_'+j);   
   for(i=0;i<tb.rows.length;i++) tb.rows[i].style.display='';
   sv.style.display='none';   
  }
  
 }
}//隐藏模拟层
function setValue(obj){
var i=getI(obj.parentElement.parentElement.parentElement.id);
//alert(obj.parentElement.parentElement.parentElement.id);
var sl=document.all["ZfText_"+i];
var sv=document.all['ZfDiv_'+i];
sl.value=obj.innerText;
sv.style.display='none';
//sldIndex=obj.parentElement.rowIndex;
}//给文本框赋值
function over(obj){
 obj.className="td_over"
 obj.title=obj.innerText
 obj.focus();
}//鼠标经过变色
function out(obj){
 obj.className="td_out"
}//鼠标离开还原
function String.prototype.Trim(){return this.replace(/(^\s*)|(\s*$)/g,'')}//自定义去空格函数Trim()
//增加list的接口,ID表示该组控件是页面中的第几个
function add(v,ID){
var sv=document.all['ZfDiv_'+ID];
if(!v.Trim()){return;}
var tb=document.all['ZfData_'+ID];
var c=tb.insertRow(tb.rows.length).insertCell();
c.innerHTML='<nobr>'+v.Trim()+'</nobr>';
c.onmouseover=new Function("over(this)");
c.onmouseout=new Function("out(this)");
c.onclick=new Function("setValue(this)");
c.className="td_out";
v='';
}
//增加inpnubox的接口,在页面中产生一个inputbox控件,下拉列表为空
function addText(name,DefValue) {
 var i=getDivCount();
 document.write('<span id="ZfSpan_'+i+'" style="border:1 solid #9CA0CB">');
 document.write('<input type="text" value="'+DefValue+'" name="'+name+'" id="ZfText_'+i+'" ondblclick="ZfDrop_'+i+'.click()" class="slv" onmouseover="select_edit(this)"  onkeyup="checkValue('+i+')"><input type=button id="ZfDrop_'+i+'" value=">" onclick="this.hideFocus=true;dropDown('+i+');" class="down" onmouseover="this.style.backgroundColor=#EEF3FD" onmouseout="this.style.backgroundColor=\'\'" onmousedown="this.style.backgroundColor=#ABC4F5" onmouseup="this.style.backgroundColor=\'\'"></span>');
 document.write('<div id="ZfDiv_'+i+'" class="seldiv" style="display:none;"><table id="ZfData_'+i+'" onselectstart="return false" border="0"  cellspacing="0" cellpadding="0" class="table1"></table></div>');
}
 
</script>
</head>
<body>
<script language="JavaScript">
addText("name1","a");
add("1234",0);
add("1234",0);
addText("name1","a");
add("1234",1);
add("1234",1);
</script>

提示：您可以先修改部分代码再运行

要加一些链接,变成菜单:

<STYLE>
body { cursor: url(http://vip.6to23.com/candylau/image/xiucursor.cur)}
</STYLE>
<style>
.select{border: 0 inset buttonface; width: 100; font: icon; cursor: default;}
.selected{border: 0 inset buttonface; background: window; padding: 0; font: icon;}
.selectTable{height: 100%; width: 100%;border: 2 inset buttonhighlight; background: buttonface;}
.option    {font: icon; padding: 1; padding-left: 3; padding-right: 3; width: 100%;}
.dropDown{position: absolute; visibility: hidden; width: 100%;border: 1 solid windowtext; padding: 0;background: window;}
.select .button    {width: 16px; height: 5; font-family: webdings; padding: 0;font-size: 11px; border: 2 outset buttonhighlight;}
</style>
<script type="text/javascript">
var overOptionCss = "background: highlight; color: highlighttext";
var sizedBorderCss = "2 inset buttonhighlight";
var globalSelect;
var ie4 = (document.all != null);
var q = 0;
function initSelectBox(el) {
    copySelected(el);
    var size = el.getAttribute("size");
    el.options = el.children[1].children;
    el.selectedIndex = findSelected(el);
    el.remove = new Function("i", "int_remove(this,i)");
    el.item   = new Function("i", "return this.options[i]");
    el.add    = new Function("e", "i", "int_add(this, e, i)");    
    el.options[el.selectedIndex].selected = true;
    dropdown = el.children[1];
    if (size != null) {
        if (size > 1) {
            el.size = size;
            dropdown.style.zIndex = 0;
            initSized(el);
        }
        else {
            el.size = 1;
            dropdown.style.zIndex = 99;
            if (dropdown.offsetHeight > 200) {
                dropdown.style.height = "200";
                dropdown.style.overflow = "auto";
            }
        }
    }
    
    highlightSelected(el,true);
}
function int_remove(el,i) {
    if (el.options[i] != null)
        el.options[i].outerHTML = "";
}
function int_add(el, e, i) {
    var html = "<div class='option' noWrap";
    if (e.value != null)
        html += " value='" + e.value + "'";
    if (e.style.cssText != null)
        html += " style='" + e.style.cssText + "'";
    html += ">";
    if (e.text != null)
        html += e.text;
    html += "</div>"
    if ((i == null) || (i >= el.options.length))
        i = el.options.length-1;
    el.options[i].insertAdjacentHTML("AfterEnd", html);
}
    
function initSized(el) {
    var h = 0;
    el.children[0].style.display = "none";
    dropdown = el.children[1];
    dropdown.style.visibility = "visible";
    if (dropdown.children.length > el.size) {
        dropdown.style.overflow = "auto";
        for (var i=0; i<el.size; i++) {
            h += dropdown.children[i].offsetHeight;
        }
        if (dropdown.style.borderWidth != null) {
            dropdown.style.pixelHeight = h + 4;
        }
        else
            dropdown.style.height = h;
    }
    dropdown.style.border = sizedBorderCss;
    el.style.height = dropdown.style.pixelHeight;
}
function copySelected(el) {
    var selectedIndex = findSelected(el);
    selectedCell = el.children[0].rows[0].cells[0];
    selectedDiv  =     el.children[1].children[selectedIndex];
    selectedCell.innerHTML = selectedDiv.outerHTML;
}
function findSelected(el) {
    var selected = null;
    ec = el.children[1].children;
    var ecl = ec.length;
    
    for (var i=0; i<ecl; i++) {
        if (ec[i].getAttribute("selected") != null) {
            if (selected == null) {
                selected = i;
            }
            else
                ec[i].removeAttribute("selected");
        }
    }
    if (selected == null)
        selected = 0;
    return selected;
}
function toggleDropDown(el) {
    if (el.size == 1) {
        dropDown = el.children[1];
        
        if (dropDown.style.visibility == "")
            dropDown.style.visibility = "hidden";
            
        if (dropDown.style.visibility == "hidden")
            showDropDown(dropDown);
        else
            hideDropDown(dropDown);
    }
}
function optionClick() {
    el = getReal(window.event.srcElement, "className", "option");
    if (el.className == "option") {
        dropdown  = el.parentElement;
        selectBox = dropdown.parentElement;
        oldSelected = dropdown.children[findSelected(selectBox)]
        if(oldSelected != el) {
            oldSelected.removeAttribute("selected");
            el.setAttribute("selected", 1);
            selectBox.selectedIndex = findSelected(selectBox);
        }
        if (selectBox.onchange != null) {
            if (selectBox.id != "") {
                eval(selectBox.onchange.replace(/this/g, selectBox.id));
            }
            else {
                globalSelect = selectBox;
                eval(selectBox.onchange.replace(/this/g, "globalSelect"));
            }
        }
        if (el.backupCss != null)
        el.style.cssText = el.backupCss;
        copySelected(selectBox);
        toggleDropDown(selectBox);
        highlightSelected(selectBox, true);
    }
}
function optionOver() {
    var toEl = getReal(window.event.toElement, "className", "option");
    var fromEl = getReal(window.event.fromElement, "className", "option");
    if (toEl == fromEl) return;
    var el = toEl;
    if (el.className == "option") {
        if (el.backupCss == null)
            el.backupCss = el.style.cssText;
        highlightSelected(el.parentElement.parentElement, false);
        el.style.cssText = el.backupCss + "; " + overOptionCss;
        this.highlighted = true;
    }
}
function optionOut() {
    var toEl = getReal(window.event.toElement, "className", "option");
    var fromEl = getReal(window.event.fromElement, "className", "option");
    if (fromEl == fromEl.parentElement.children[findSelected(fromEl.parentElement.parentElement)]) {
        if (toEl == null)
            return;
        if (toEl.className != "option")
            return;
    }
    
    if (toEl != null) {
        if (toEl.className != "option") {
            if (fromEl.className == "option")
                highlightSelected(fromEl.parentElement.parentElement, true);
        }
    }
    
    if (toEl == fromEl) return;
    var el = fromEl;
    if (el.className == "option") {
        if (el.backupCss != null)
            el.style.cssText = el.backupCss;
    }
}
function highlightSelected(el,add) {
    var selectedIndex = findSelected(el);
    selected = el.children[1].children[selectedIndex];
    
    if (add) {
        if (selected.backupCss == null)
            selected.backupCss = selected.style.cssText;
        selected.style.cssText = selected.backupCss + "; " + overOptionCss;
    }
    else if (!add) {
        if (selected.backupCss != null)
            selected.style.cssText = selected.backupCss;
    }
}
function hideShownDropDowns() {
var el = getReal(window.event.srcElement, "className", "select");
var spans = document.all.tags("SPAN");
var selects = new Array();
var index = 0;
    
    for (var i=0; i<spans.length; i++) {
if ((spans[i].className == "select") && (spans[i] != el)) {
    ropdown = spans[i].children[1];
if ((spans[i].size == 1) && (dropdown.style.visibility == "visible"))
    selects[index++] = dropdown;
    }
}
for (var j=0; j<selects.length; j++) {
hideDropDown(selects[j]);
}
}
function hideDropDown(el) {
    if (typeof(fade) == "function")
    fade(el, false);
    else
    el.style.visibility = "hidden";
}
function showDropDown(el) {
    if (typeof(fade) == "function")
    fade(el, true);
    else if (typeof(swipe) == "function")
    swipe(el, 2);
    else
    el.style.visibility = "visible";
}
function initSelectBoxes() {
var spans = document.all.tags("SPAN");
var selects = new Array();
var index = 0;
for (var i=0; i<spans.length; i++) {
if (spans[i].className == "select")
selects[index++] = spans[i];
}
for (var j=0; j<selects.length; j++) {
initSelectBox(selects[j]);
}    
}
function getReal(el, type, value) {
temp = el;
while ((temp != null) && (temp.tagName != "BODY")) {
if (eval("temp." + type) == value) {
el = temp;
return el;
}
temp = temp.parentElement;
}
return el;
}
if (ie4) {
window.onload = initSelectBoxes;
document.onclick = hideShownDropDowns;
}
function writeSelectBox(matrix, id, size, onchange, css) {
    var d = window.document;
    var ie4 = (document.all != null);
    if (ie4) {
//alert("Before!");
var s = createIEString(matrix, id, size, onchange, css);
document.write(s);
//alert("After!");
}else 
{
document.write(createXString(matrix, id, size, onchange, css));}
}
function createIEString(matrix, id, size, onchange, css) {
    var str = "";
        str += '<span class="select"';
        if (size == null)
            size = 1;
        str += ' size="' + size + '"';    
        if (id != null)
            str += ' id="' + id + '"';
        if (onchange != null)
            str += ' onchange="' + onchange + '"';
        if (css != null)
        str += ' style="' + css + '"';
        str += '>\n';
        str += '<table class="selectTable" cellspacing="0" cellpadding="0"\n';
        str += ' onclick="toggleDropDown(this.parentElement)">\n';
        str += '<tr>\n';
        str += '<td class="selected"> </td>\n';
        str += '<td align="CENTER" valign="MIDDLE" class="Button"\n';
        str += ' onmousedown="this.style.border=\'2 inset buttonhighlight\'"\n';
        str += ' onmouseup="this.style.border=\'2 outset buttonhighlight\'">\n';
        str += '<span style="position: relative; left: 0; top: -2; width: 100%;">6</span></td>\n';
        str += '</tr>\n';
        str += '</table>\n';
        str += '<div class="dropDown" onclick="optionClick()" onmouseover="optionOver()" onmouseout="optionOut()">\n';
        
        for (var i=0; i<matrix.length; i++) {
            html     = matrix[i].html;
            value    = matrix[i].value;
            css      = matrix[i].css;
            selected = matrix[i].selected;
            str += '<div class="option"';
            if (value != null)
                str += ' value="' + value + '"';
            if (css != null)
                str += ' style="' + css + '"';
            if (selected != null)
                str += ' selected';
            str += '>\n';
            str += html;
            str += '</div>\n';
        }
        str += '</div>\n';
        str += '</span>\n';
    return str;
}
function createXString(matrix, id, size, onchange, css) {
var str = '<form>\n';
str += '<select';
if (size == null)
    size = 1;
str += ' size="' + size + '"';    
if (id != null)
    str += ' id="' + id + '"';
if (onchange != null)
    str += ' onchange="' + onchange + '"';
str += '>\n';
for (var i=0; i<matrix.length; i++) {
    html     = matrix[i].html;
    value    = matrix[i].value;
    css      = matrix[i].css;
    selected = matrix[i].selected;
    str += '\n<option';
    if (value != null)
    str += ' value="' + value + '"';
    if (selected != null)
        str += ' selected';
    str += '>';
    str += stripTags(html);
    str += '</option>\n';
    }
    str += '\n</select>\n';
    str += '</form>\n';
return str;
}
function stripTags(str) {
    var s = 0;
    var e = -1;
    var r = "";
    s = str.indexOf("<",e);    
    do {
        r += str.substring(e + 1,s);
        e = str.indexOf(">",s);
        s = str.indexOf("<",e);
    }
    while ((s != -1) && (e != -1))
    r += str.substring(e + 1,str.length);
    return r;
}
function Option(html, value, css, selected) {
    this.html = html;
    this.value = value;
    this.css = css;
    this.selected = selected;
}
</script>
<script type="text/javascript">
var optionArray = new Array();
optionArray[0] = new Option("Item 1", "value 1", "color: blue; text-decoration: underline;");
optionArray[1] = new Option("Item <b>2</b>", "value 2");
optionArray[2] = new Option("Item 3", "value 3", "color: red;", "selected");
optionArray[3] = new Option("Item 4", "value 4");
optionArray[4] = new Option("Item 5", "value 5");
writeSelectBox(optionArray, "select1", 1, "alert(this.options[this.selectedIndex].value)", "margin-left: 10;");
</script>
<br>
<script type="text/javascript">
writeSelectBox(optionArray, "select3", 3, "alert(this.options[this.selectedIndex].value)", "margin-left: 10;");
</script>
<br><br><br><br>
<select onchange="if(this.options[this.selectedIndex].value!=''){location=this.options[this.selectedIndex].value;}" >
<option value="http://www.163.com">网易</option>
<option value="http://www.google.com">google</option>
<option value="http://wwwsohu.com">搜狐</option>
</select>
<br><br><br><br>
<form>
<select size="1" name="D1" onchange=if(s=document.getElementById("S1")){s.style.backgroundColor=value}>
<option selected value="white">请选择颜色</option>
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
</select>
<br>
<textarea rows="20" name="S1" cols="35"></textarea>
</form>
<br><br>

提示：您可以先修改部分代码再运行

提示：您可以先修改部分代码再运行

后来发展到其文字内容可以增、删、编、改，即可以编辑：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>EditSelect</title>
<script>
function isIE(){
a=navigator.appVersion.split(";")
b=a[1].split(" ")
return parseFloat(b[2])
}
if (isIE()<5.5) 
{
     scHTML='<div id="selectcontent" class="selectdiv" style="visibility:hidden;"><div id="selecthtml" class="selectcontent">select&#225;D表</div></div>'
}
else
{
     scHTML='<div id="selectcontent" class="selectdiv" style="visibility:hidden;"><iframe id=selframe frameborder=0 height=100%></iframe><div id="selecthtml" class="selectcontent">select&#225;D表</div></div>'
}
document.write(scHTML)
vDiv=selectcontent
vDivHtml=selecthtml
function editselect(name,size,defaulttext,width,height,readonly){
  var combo=this;
  this.options=new Array();
  this.oj=new Array();
  this.name=name;
  this.divname=name+'_div';
  this.buttonname=name+'_button';
  this.tablename=name+'_table';
  this.htmltable=name+'_html'
  if (!height) this.height=0; else this.height=height
  if (width) this.width=width
  if (!size) size=8
  if (!defaulttext) defaulttext=""
  if (!readonly || readonly==0) {readonly="" }else {if (readonly==1) readonly="readonly style=cursor:default";this.readonly=1}
  
  esHTML='<div id='+this.divname+'>'
         +'<table id='+this.tablename+' cellpadding=0 cellspacing=0 class=select><tr><td bgcolor=#FFFFFF>'
         +'<input type=text class=selecttext size="'+size+'" name='+name+' value="'+defaulttext+'" '+readonly+'><td><button class=selectbutton id='+this.buttonname+'>6</td></tr></table>'
         +'</div>'
  document.write(esHTML)
  this.sbutton=eval("document.all."+this.buttonname)
  
  if (this.readonly==1) eval("document.all."+this.name).onclick=function(){combo.show()}  
  
  this.sbutton.onclick=function(){combo.show()}
  this.show=function(){
    pDiv=eval(combo.divname)
    pTable=eval(combo.tablename)
    var vHTML='<table id=htmltable cellspacing="0" cellpadding="2" bgcolor="#ffffff" class="selecttable" width=100%>'
    for (i=0;i<combo.options.length;i++)
      {
       vHTML+='<tr onmouseover="mo(this)" onmouseout="mu(this)" onclick="document.all.'+combo.name+'.value=this.innerText;selectcontent.style.visibility=\'hidden\';'+combo.oj[i]+'"><td nowrap>'+combo.options[i]
      }
     vHTML+="</table>"
    vDivHtml.innerHTML=vHTML
    
    vtop=pDiv.offsetTop+pDiv.offsetHeight
    vleft=pDiv.offsetLeft+2
    
    
    vParent = pDiv.offsetParent;
     while (vParent.tagName.toUpperCase() != "BODY")
 {
  vleft += vParent.offsetLeft;
  vtop += vParent.offsetTop;
  vParent = vParent.offsetParent;
 }
   var redge=document.body.clientWidth-vleft
   var bedge=document.body.clientHeight-vtop
 
   
 if (!combo.width) {vDiv.style.width=pTable.offsetWidth} else {vDiv.style.width=combo.width}
    
    if (combo.height==0)
      {
        vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
        vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
      }
      else
      {
         if (htmltable.offsetHeight>combo.height)
          {
            vDiv.style.pixelHeight=combo.height
            vDivHtml.style.pixelHeight=combo.height
            } 
           else 
           {
          
              vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
              vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
           }
   
       }
    
    vDivHtml.scrollTop=0
    
    if (redge<vDiv.offsetWidth)
      vDiv.style.left=vleft-1-(vDiv.offsetWidth-redge)
        else
      vDiv.style.left=vleft-1
      
   if (bedge<vDiv.offsetHeight)
    //vDiv.style.top=vtop-vDiv.offsetHeight-pDiv.offsetHeight
    vDiv.style.top=vtop-vDiv.offsetHeight+bedge
         else
      vDiv.style.top=vtop
      
    
    vDivHtml.style.width=parseInt(vDiv.style.width)
      vDiv.style.visibility="visible"
  }
  
  this.add=function(text,js){
     combo.options[combo.options.length]=text
     combo.oj[combo.oj.length]=js
  }
  
  this.clearall=function(){
  combo.options=new Array()
  }
  this.about=function(){
  
 }
}
function mo(obj){
obj.style.backgroundColor="#000099"
obj.style.color="#ffffff"
}
function mu(obj){
obj.style.backgroundColor=""
obj.style.color="#000000"
}
document.onmousedown=function(){
if (vDiv.style.visibility=="visible"){
mx=event.x + document.body.scrollLeft
my=event.y + document.body.scrollTop;
x1=vDiv.offsetLeft
y1=vDiv.offsetTop
x2=vDiv.offsetLeft+vDiv.offsetWidth
y2=vDiv.offsetTop+vDiv.offsetHeight
if (mx<x1 || my<y1 || x2<mx || y2<my) 
   { 
     vDiv.style.visibility='hidden'
   }
}
}</script>
<style>
.selecttext{
border:0px
height: 16;
font-family:arial;
font-size:12px;
}
.selectbutton{
font-family:webdings;
font-size:10px;
height: 19;
width: 16; 
border:1px solid #83A5EB;
line-height:0px;
padding-bottom:3px;
background-color:#D1E0FD
}
.selecttable{
font-family:arial;
font-size:12px;
cursor:default;
}
.selectcontent
{
position: absolute;
top:0;
left:0;
overflow:auto;
border:1px solid #000000
}
.selectdiv
{
position: absolute; 
width:100;
overflow:hidden;
}
.select{
border-collapse: collapse;
border:1px solid #7F9DB9
}
</style>
</head>
<body bgcolor="#83A5EB" background="http://moodboy.com/puterjam/blog/attachments/month_0408/oldr_cs1.JPG">
<table border="0" width="100%">
 <tr>
  <td width="151" align="center"><font size="2">可编辑的Select</font></td>
  <td><script>
var sel1=new editselect("select1","25","可编辑的Select","");
sel1.add("这是一个可以编辑的Select")
sel1.add("支持CSS")
sel1.add("可以通过CSS，修改外形")
sel1.add("突破原来的Select诸多限制")
</script></td>
 </tr>
 <tr>
  <td width="151" align="center"><font size="2">长度可以随意修改
可以设置为只读</font></td>
  <td>
  <script>
var sel2=new editselect("select2","20","长度可以随意修改",250,82,1);
sel2.add("这是一个可以编辑的Select")
sel2.add("支持CSS")
sel2.add("可以通过CSS，修改外形")
sel2.add("作者:舜子制作")
sel2.add("MSN:puterjam@msn.com")
</script>
  </td>
 </tr>
 <tr>
  <td width="151" align="center"><font size="2">可以遮盖系统Select</font></td>
  <td>
  <script>
var sel3=new editselect("select3","25","可以遮盖系统Select","",41);
sel3.add("这是一个可以编辑的Select")
sel3.add("支持CSS")
sel3.add("可以通过CSS，修改外形")
sel3.add("突破原来的Select诸多限制")
</script>
  </td>
 </tr>
 <tr>
  <td width="151" align="right">　</td>
  <td><select><option>系统的Select</option></select>　</td>
 </tr>
</table>
</body>
</html>

提示：您可以先修改部分代码再运行

本帖最近评分记录

zhuyinhong 威望 +1 谢谢分享 2009-2-18 16:04

┏┯┓┏┯┓┏┯┓┏┯┓
┠知┨┠往┨┠观┨┠来┨
┗┷┛┗┷┛┗┷┛┗┷┛

TOP

西部数码VPS主机1G内存仅266元

marvellous [楼主]

金翅擘海

荣誉管理团队

帖子: 13287
体力: 27867
威望: 143
当前: 北京朝阳区

2^# 大中小发表于 2006-3-24 16:13

接续上文
可编辑的select:

按回车键输入新内容，按DEL删除选中内容<br>
<body bgcolor="#fef4d9" onload="s1.focus();">
<script language="JavaScript">

</script>
<select name=s1 onkeydown="catch_keydown(this);" onkeypress="catch_press(this);" style="font-size:12px;"><option>---</option></select>

提示：您可以先修改部分代码再运行

为了让select里有更多的图片、css修饰及其他静、动态修饰效果，而select本身优先级别太高，其修饰效果很少且不能满足上述要求，遂涌现出很多模拟的select:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<style type="text/css">

</style>
<script  lanuage="JScript">
function  turnit(ss)
{
  if  (ss.style.display=="none")  
    {ss.style.display="";
	for (var i=1;i<4;i++)
{
if (eval('t'+i).innerText==text1.value)
eval('t'+i).className='ss'
else
eval('t'+i).className=''
}
}
  else
    {ss.style.display="none";   
   }
}
function sele(tid)
{
bb.style.display='none';
text1.value=tid.innerText;
}
function over(tid)
{
for (var i=1;i<4;i++)
{
eval('t'+i).className=''
}
tid.className='ss'
if(typeof(prevObj)!='undefined')
prevObj.bgColor='';
prevObj=tid;
}
function openb()
{
if (bb.style.display=='')
bb.style.display='none'
}
</script>
<style type="text/css">

</style>
</head>
<body onclick=if(event.srcElement.tagName=='BODY')bb.style.display='none';>
<table width="98" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="98" nowrap>
<input name="text1" type="text" size="10" class=n1 readonly value=请选择 onclick=turnit(bb) onSelectStart=event.returnValue=false><input name="Submit" type="text" class="n2" value="" readonly onclick=turnit(bb)>
      
    </td>
  </tr>
  <tr>
    <td id=bb style=display:none><div id="Layer1" style="position:absolute; width:98px; height:100px; overflow: scroll; overflow-x:hidden; z-index: 1;" class="n1"> 
        <table width="100%" border="0" cellpadding="0" cellspacing="0" id=tb onSelectStart=event.returnValue=false>
          <tr> 
            <td  id=t1 onMouseOver =over(this)  onclick=sele(this)>选择1</td>
          </tr>
          <tr> 
            <td id=t2 onMouseOver =over(this)  onclick=sele(this)>选择2</td>
          </tr>
          <tr> 
            <td id=t3 onMouseOver =over(this)  onclick=sele(this)>选择3</td>
          </tr>
         
        </table>
      </div></td>
  </tr>
</table>
</body>
</html>

提示：您可以先修改部分代码再运行

<center><sup><font face="隶书" color="blue">上标是不是这个？</font></sup><font size="6" face="华文行楷" color="red">如果要想以其他的文字作为上标该怎么做啊？</font><sub><font face="黑体" color="green"><b><i>下标是不是这个？</b></i></font></sub>
<br><br>
<base href="http://lucky.diy.myrice.com/temp/">
<body  leftmargin="50" topmargin="50">
<style>
.optionForSel {font-size:9pt}
</style>
<center>
<table cellpadding="0" cellspacing="0" border="0" width="300">
	<tr>
		<td id="selectLength" width="100%" style="height:20px;padding:0px;border:2px inset #404040;border-right:0px;border-bottom:1px solid #D4D0C8;font-size:9pt;">
			<div id="selectedValue" style="padding:2px;border:0px;width:100%;height:20px;font-size:9pt;vertical-align:bottom"></div>
		</td>
		<td width="20" style="height:20px;padding:0px;border-top:2px inset #404040;border-left:0px;border-right:1px solid #D4D0C8;border-bottom:1px solid #D4D0C8;font-size:9pt">
			<img src="button2.gif" width="20" height="21" border="0" id="mm" onclick="mm_Click()" align="absmiddle">
		</td>
	</tr>
</table>
<div id="dropdownOption" style="position:absolute;visibility:hidden;width:100%;border:1px solid #080808;z-index:1000">
	<table width="100%" cellpadding="0" cellspacing="1" class="optionForSel" bgcolor="White">
		<tr onmouseover="this.style.backgroundColor='#0099ff'" onmouseout="this.style.backgroundColor=''">
			<td onclick="document.all.selectedValue.innerText=this.innerText">
				<img src="http://lucky.myrice.com/images/copyright.gif" border="0" align="absmiddle" hspace="2"><a href="http://lucky.myrice.com">一个好孩子</a>
			</td>
		</tr>
		<tr>
			<td onmouseover="this.style.backgroundColor='#0099ff'" onmouseout="this.style.backgroundColor=''"onclick="document.all.selectedValue.innerText=this.innerText">
				<img src='http://lucky.myrice.com/images/meng1.gif' border="0" align="absmiddle" hspace="2"><a href="http://lucky.myrice.com">二两疙瘩肉</a>
			</td>
		</tr>
		<tr>
			<td onmouseover="this.style.backgroundColor='#0099ff'" onmouseout="this.style.backgroundColor=''"onclick="document.all.selectedValue.innerText=this.innerText">
				<img src='http://lucky.myrice.com/images/meng2.gif' border="0" align="absmiddle" hspace="2"><a href="http://lucky.myrice.com">三分油菜田</a>
			</td>
		</tr>
	</table>
</div>
<script>
function mm_Click()
{
	if(document.all.dropdownOption.style.visibility == 'visible')
		document.all.dropdownOption.style.visibility='hidden'
	else
		document.all.dropdownOption.style.visibility='visible'
}
function init(){
document.all.dropdownOption.style.width = document.all.selectLength.clientWidth + 22;
document.all.selectedValue.contentEditable = true;
var strTop = 0;
var strLeft = 0;
var e1 = document.all.selectLength;
while(e1.tagName != "BODY")
{
strTop += e1.offsetTop
strLeft += e1.offsetLeft
e1 = e1.offsetParent
}
document.all.dropdownOption.style.top = String(strTop + 24) + "px";
document.all.dropdownOption.style.left = String(strLeft) + "px";
}
function clickE()
{
if(window.event.srcElement.id !='mm')
document.all.dropdownOption.style.visibility='hidden';
}
document.onclick = clickE
window.onload = init
</script>
<br><br><br><br>
<input onclick="alert(document.all.selectedValue.innerText)" type="button" value="得到选中的值">

提示：您可以先修改部分代码再运行

下面这两个已达到较高的水准（动态内容）：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>EditSelect</title>
<script>
scHTML='<div id="selectcontent" class="selectdiv" style="visibility:hidden;"><iframe id=selframe frameborder=0 height=100%></iframe><div id="selecthtml" class="selectcontent">select&Aacute;&ETH;&#177;&#237;</div></div>'
document.write(scHTML)
vDiv=selectcontent
vDivHtml=selecthtml
function editselect(name,size,defaulttext,width,height,readonly){
  var combo=this;
  this.options=new Array();
  this.name=name;
  this.divname=name+'_div';
  this.buttonname=name+'_button';
  this.tablename=name+'_table';
  this.htmltable=name+'_html'
  
  if (!height) this.height=0; else this.height=height
  if (width) this.width=width
  if (!size) size=8
  if (!defaulttext) defaulttext=""
  if (!readonly || readonly==0) {readonly="" }else {if (readonly==1) readonly="readonly style=cursor:default";this.readonly=1}
  
  esHTML='<div id='+this.divname+'>'
         +'<table id='+this.tablename+' cellpadding=0 cellspacing=0 class=select><tr><td bgcolor=#FFFFFF>'
         +'<textarea type=text class=selecttext cols="'+size+'" rows="1" name='+name+' value="'+defaulttext+'" contenteditable="false" '+readonly+'></textarea><td><button class=selectbutton id='+this.buttonname+'>6</td></tr></table>'
         +'</div>'
  document.write(esHTML)
  this.sbutton=eval("document.all."+this.buttonname)
  
  if (this.readonly==1) eval(this.name).onclick=function(){combo.show()}
  
  this.sbutton.onclick=function(){combo.show()}
  this.show=function(){
    pDiv=eval(combo.divname)
    pTable=eval(combo.tablename)
    var vHTML='<table id=htmltable cellspacing="0" cellpadding="2" bgcolor="#ffffff" class="selecttable" width=100%>'
    for (i=0;i<combo.options.length;i++)
      {
       vHTML+='<tr onmouseover="mo(this)" onmouseout="mu(this)" onclick="document.all.'+combo.name+'.innerHTML=\'\';var t=document.createElement(\'span\');t.innerHTML=this.innerHTML;document.all.'+combo.name+'.appendChild(t);selectcontent.style.visibility=\'hidden\'"><td nowrap>'+combo.options[i]
      }
     vHTML+="</table>"
    vDivHtml.innerHTML=vHTML
    
    vtop=pDiv.offsetTop+pDiv.offsetHeight
    vleft=pDiv.offsetLeft+1
    
    
    vParent = pDiv.offsetParent;
    	while (vParent.tagName.toUpperCase() != "BODY")
	{
		vleft += vParent.offsetLeft;
		vtop += vParent.offsetTop;
		vParent = vParent.offsetParent;
	}
   var redge=document.body.clientWidth-vleft
   var bedge=document.body.clientHeight-vtop
 
  	
	if (!combo.width) {vDiv.style.width=pTable.offsetWidth} else {vDiv.style.width=combo.width}
    
    if (combo.height==0)
      {
        vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
        vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
      }
      else
      {
         if (htmltable.offsetHeight>combo.height)
          {
            vDiv.style.pixelHeight=combo.height
            vDivHtml.style.pixelHeight=combo.height
            } 
           else 
           {
          
              vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
              vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
           }
   
       }
    
    vDivHtml.scrollTop=0
    
    if (redge<vDiv.offsetWidth)
      vDiv.style.left=vleft-1-(vDiv.offsetWidth-redge)
        else
      vDiv.style.left=vleft-1
      
   if (bedge<vDiv.offsetHeight)
    //vDiv.style.top=vtop-vDiv.offsetHeight-pDiv.offsetHeight
    vDiv.style.top=vtop-vDiv.offsetHeight+bedge
         else
      vDiv.style.top=vtop
      
    
    vDivHtml.style.width=parseInt(vDiv.style.width)
      vDiv.style.visibility="visible"
  }
  
  this.add=function(text){
     combo.options[combo.options.length]=text
  }
  
  this.about=function(){
  
 }
}
function mo(obj){
obj.style.backgroundColor="#000099"
obj.style.color="#ffffff"
}
function mu(obj){
obj.style.backgroundColor=""
obj.style.color="#000000"
}
document.onmousedown=function(){
if (vDiv.style.visibility=="visible"){
mx=event.x + document.body.scrollLeft
my=event.y + document.body.scrollTop;
x1=vDiv.offsetLeft
y1=vDiv.offsetTop
x2=vDiv.offsetLeft+vDiv.offsetWidth
y2=vDiv.offsetTop+vDiv.offsetHeight
if (mx<x1 || my<y1 || x2<mx || y2<my) 
   { 
     vDiv.style.visibility='hidden'
   }
}
}
</script>
<style>
.selecttext{
border:0px
height: 22;
font-family:arial;
font-size:14px;
overflow:hidden;
}
.selectbutton{
font-family:webdings;
font-size:10px;
height: 25;
width: 16; 
border:1px solid #83A5EB;
line-height:0px;
padding-bottom:1px;
background-color:#D1E0FD
}
.selecttable{
font-family:arial;
font-size:12px;
cursor:default;
}
.selectcontent
{
position: absolute;
top:0;
left:0;
overflow:auto;
border:1px solid #000000
}
.selectdiv
{
position: absolute; 
width:100;
overflow:hidden;
}
.select{
border-collapse: collapse;
border:1px solid #7F9DB9
}
</style>
</head>
<body bgcolor="#83A5EB" marginheight="0" marginwidth="0" topmargin="0" leftmargin="0">
<center>
<table border="0" width="234">
	<tr>
		<td width="151" align="center"><font size="2">可编辑的Select</font></td>
		<td><script>
var sel1=new editselect("select1","25","可编辑的Select","");
sel1.add("<marquee behavior=alternate><img src='http://www.blueidea.com/articleimg/bbsimg/icon6.gif' align='absmiddle'>  <B><font color=#22FF22>知</font><font color=#FF2222>往</font><font color=#001199>观</font><font color=#00fffa>来</font></B></marquee>")
sel1.add("<img src='http://www.blueidea.com/articleimg/bbsimg/icon7.gif' align='absmiddle'>  微风香水")
sel1.add("<img src='http://www.blueidea.com/articleimg/bbsimg/icon8.gif' align='absmiddle'>  阳光锈了")
sel1.add("<img src='http://www.blueidea.com/articleimg/bbsimg/icon9.gif' align='absmiddle'>  <B><font color=#22FF22>观</font><font color=#FF2222>往</font><font color=#001199>知</font><font color=#00fffa>来</font></B>")
</script></td>
	</tr>
	<tr>
		<td width="151" align="right">　</td>
		<td>&nbsp;</td>
	</tr>
</table>

提示：您可以先修改部分代码再运行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<style type="text/css">

</style>
<script  lanuage="JScript">
function  turnit(ss)
{
  if  (ss.style.display=="none")  
    {ss.style.display="";
}
  else
    {ss.style.display="none";   
   }
}
function sele(tid)
{
bb.style.display='none';
text1.value=tid.innerText;
}
function over(tid)
{
for (var i=1;i<4;i++)
{
eval('t'+i).className=''
}
tid.className='ss'
}
function out(tid)
{
if (bb.style.display!='none')
tid.className=''
}
</script>
<style type="text/css">

</style>
</head>
<body style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=green,endColorStr=white);SCROLLBAR-ARROW-COLOR: #fc0048;
 SCROLLBAR-TRACK-COLOR: #242400;
 SCROLLBAR-BASE-COLOR: #24b400;">
<table width="198" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td width="198" nowrap>
<input name="text1" type="text" size="20" class=n1 readonly value=这里头别无选择 onclick=turnit(bb) style="color:red;font-family:隶书;font-size:14px;text-align:center;background:yellow;"><input name="Submit" type="text" class="n2" value="" readonly onclick=turnit(bb)>
      
    </td>
  </tr>
  <tr>
    <td id=bb style=display:none><div id="Layer1" style="position:absolute; width:198px; height:100px; overflow: scroll; overflow-x:hidden; z-index: 1;SCROLLBAR-ARROW-COLOR: #fc0048;
 SCROLLBAR-TRACK-COLOR: #242400;
 SCROLLBAR-BASE-COLOR: #24b400;" class="n1" > 
        <table width="100%" border="0" cellpadding="0" cellspacing="0" id=tb> 
          <tr> 
            <td  id=t1 onMouseOver =over(this) onMouseOut =out(this) onclick=sele(this) style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=lime,endColorStr=white);"><img src="http://www.blueidea.com/articleimg/usericon/hubro.gif" align="absmiddle">金翅擘海</td>
          </tr>
          <tr> 
            <td id=t2 onMouseOver =over(this) onMouseOut =out(this) onclick=sele(this) style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=brown,endColorStr=white);"><img src="http://www.blueidea.com/articleimg/usericon/hubro.gif" align="absmiddle"><B><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></B></td>
          </tr>
          <tr> 
            <td id=t3 onMouseOver =over(this) onMouseOut =out(this) onclick=sele(this) style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=darckblue,endColorStr=white);"><marquee behavior="alternate"><img src="http://www.blueidea.com/articleimg/usericon/hubro.gif" align="absmiddle">海阿洛瓦</marquee></td>
          </tr>
  
          <tr> 
            <td  id=t1 onMouseOver =over(this) onMouseOut =out(this) onclick=sele(this) style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=pink,endColorStr=white);"><img src="http://www.blueidea.com/articleimg/usericon/hubro.gif" align="absmiddle">蓝色月光</td>
          </tr>
          <tr> 
            <td id=t2 onMouseOver =over(this) onMouseOut =out(this) onclick=sele(this) style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=red,endColorStr=white);"><img src="http://www.blueidea.com/articleimg/usericon/hubro.gif" align="absmiddle"><B><font color="#22FF22">波</font><font color="#FFdd22">希</font><font color="#001199">米</font><font color="#00fffa">亚 </font></B></td>
          </tr>
          <tr> 
            <td id=t3 onMouseOver =over(this) onMouseOut =out(this) onclick=sele(this) style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=green,endColorStr=white);"><marquee behavior="alternate"><img src="http://www.blueidea.com/articleimg/usericon/hubro.gif" align="absmiddle">红色黑客</marquee></td>
          </tr>
       
        </table>
      </div></td>
  </tr>
</table>

提示：您可以先修改部分代码再运行

┏┯┓┏┯┓┏┯┓┏┯┓
┠知┨┠往┨┠观┨┠来┨
┗┷┛┗┷┛┗┷┛┗┷┛

TOP

广州周立功诚聘—平面/网页/UI/工业设计师 | 天业互联-酷睿租用599￥

jarrylee

高级会员

帖子: 212
体力: 634
威望: 26
离线: 376 天

3^# 大中小发表于 2006-3-24 16:23

有一两个有点意义。
要能上下键也能用才行，但加一堆代码似乎不值啊。

飞翔在碧草春绿里的鸢，正寻找着属于青春轨迹中富有无限生机的绿！
"鸢飞戾天,鱼跃于渊。"愿你我共同进步！
http://jiarry.126.com

TOP

认证您的手机，获得手机认证图标

，更多手机认证的好处

marvellous [楼主]

金翅擘海

荣誉管理团队

帖子: 13287
体力: 27867
威望: 143
当前: 北京朝阳区

4^# 大中小发表于 2006-3-31 12:49

可以去掉下拉的小三角,但不可以无边框

提示：您可以先修改部分代码再运行

┏┯┓┏┯┓┏┯┓┏┯┓
┠知┨┠往┨┠观┨┠来┨
┗┷┛┗┷┛┗┷┛┗┷┛

TOP

用CSS布局建站从零开始 | Photoshop中打造史诗般梦幻场景 | 05年第一次软件行业创业的惨痛教训

llinzzi

中级会员

帖子: 172
体力: 338
威望: 6
当前: 北京朝阳区

专长 前端制作,JS,.NET

5^# 大中小发表于 2006-3-31 13:22

相当的厉害

TOP

marvellous [楼主]

金翅擘海

荣誉管理团队

帖子: 13287
体力: 27867
威望: 143
当前: 北京朝阳区

6^# 大中小发表于 2006-4-5 20:41

鼠标移过来select自动下拉

提示：您可以先修改部分代码再运行

┏┯┓┏┯┓┏┯┓┏┯┓
┠知┨┠往┨┠观┨┠来┨
┗┷┛┗┷┛┗┷┛┗┷┛

TOP

marvellous [楼主]

金翅擘海

荣誉管理团队

帖子: 13287
体力: 27867
威望: 143
当前: 北京朝阳区

7^# 大中小发表于 2006-4-10 12:39

圆角select:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Select Replacement Test</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <meta http-equiv="Content-Language" content="en-us" />
  <meta name="author" content="Aaron Gustafson (aaron at easy-designs dot net)" />
  <meta name="MSSmartTagsPreventParsing" content="true" />
  <meta name="ROBOTS" content="ALL" />
  <meta name="Copyright" content="(CC) 1999-2005 Easy! Designs, LLC. Except where otherwise noted, this site is licensed under a Creative Commons License." />
  <meta http-equiv="imagetoolbar" content="no" />
  <meta name="Rating" content="General" />
  <style type="text/css">
    body {
      font: 80% "Trebuchet MS", verdana, helvetica, arial, sans-serif;
    }
    input {
      display: block;
      margin: 0 0 10px;
      border: 1px solid #666;
      color: #999;
    }
    legend {
      font-size: 1.2em;
      font-weight: bold;
    }
    label {
      display: block;
      font-weight: bold;
      color: #666;
    }
    select {
      display: block;
      width: 300px;
    }
    select.replaced {
      display: none;
    }
    ul.selectReplacement {
      background: url(http://www.easy-designs.net/articles/replaceSelect/files/top.jpg) top left no-repeat;
      margin: 0;
      padding: 0;
      height: 1.65em;
      width: 300px;
    }
    ul.selectReplacement li {
      background: #cf5a5a;
      color: #fff;
      cursor: pointer;
      display: none;
      font-size: 11px;
      line-height: 1.7em;
      list-style: none;
      margin: 0;
      padding: 1px 12px;
      width: 276px;
    }
    ul.selectOpen li {
      display: block;
    }
    ul.selectReplacement li.selected {
      background: url(http://www.easy-designs.net/articles/replaceSelect/files/bottom.gif) bottom left no-repeat;
      color: #fff;
      display: block;
    }
    ul.selectOpen li.selected {
      background: #9e0000;
      display: block;
    }
    ul.selectOpen li:hover,
    ul.selectOpen li.hover,
    ul.selectOpen li.selected:hover {
      background: #9e0000;
      color: #fff;
    }
  </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>
<h1>Select Replacement Test</h1>
<form action="#" method="post">
  <fieldset>
    <legend>Sample Form</legend>
    <label for="something">Select to Replace</label>
    <select id="something" name="something">
      <option value="1">This is option 1</option>
      <option value="2">This is option 2</option>
      <option value="3">This is option 3</option>
      <option value="4">This is option 4</option>
      <option value="5" selected="selected">This is option 5</option>
      <option value="6">This is option 6</option>
      <option value="7">This is option 7</option>
      <option value="8">This is option 8</option>
    </select>
  </fieldset>
</form>
</body>
</html>

提示：您可以先修改部分代码再运行

┏┯┓┏┯┓┏┯┓┏┯┓
┠知┨┠往┨┠观┨┠来┨
┗┷┛┗┷┛┗┷┛┗┷┛

TOP

baby21st

新手上路

帖子: 10
体力: 30
威望: 0
离线: 18 天

8^# 大中小发表于 2006-4-12 17:23

真正有意义的没有几个，那个可编辑的，编辑是编辑了，但下拉框里还是以前的

现在觉得SELECT比较讨厌，HTML控件中就它最特别，层盖不住，还得用个IFRAME来盖
、、、

哈皮百科

TOP

x03570227

初级会员

帖子: 48
体力: 174
威望: 0
离线: 425 天

9^# 大中小发表于 2006-4-14 23:31

从来没敢想过select还能这么做,真是谢谢楼主让我开了眼界,收藏先

caiban.langz.cn

TOP

carontdj

高级会员

帖子: 170
体力: 549
威望: 0
离线: 3 天

10^# 大中小发表于 2006-5-5 18:08

支持,顶顶

真希望什么时候能让w3c重新定义下select,摒弃各种缺点

TOP

hyhehehoho

中级会员

帖子: 128
体力: 433
威望: 0
离线: 410 天

11^# 大中小发表于 2006-5-5 21:15

老大发彪了

个人网站

TOP

myraider

真善美离我很远

禁止发言

帖子: 1419
体力: 2762
威望: 4
离线: 675 天

12^# 大中小发表于 2006-7-27 19:24

除了第一个都是模拟的啊，这不是 select 教程，这是 JavaScript 教程。

你不是从哪转贴过来的吧？怎么代码乱得一比阿。

[ 本帖最后由 myraider 于 2006-7-27 19:25 编辑 ]

TOP

tjjstan

中级会员

帖子: 117
体力: 350
威望: 0
当前: 广东东莞
离线: 110 天

13^# 大中小发表于 2006-8-6 23:12

用层模拟的select怎么加上value呀?

有问必答,答非所问

TOP

foodgod

新手上路

帖子: 6
体力: 9
威望: 0
离线: 32 天

14^# 大中小发表于 2006-8-7 13:48

楼主很强！

但是怎么在列表项里边显示上下标文字呀？我要在列表里显示平方米符号m2，怎么做呀？

TOP

henlly

银牌会员

帖子: 426
体力: 1100
威望: 1

15^# 大中小发表于 2006-8-7 20:52

可惜好多都不支持FF...

人生如棋, 举手无悔!!! 珍惜现在的每一分每一秒,珍惜你身边的每一个人;每一个机会. 别错过了再说后悔......

TOP

ccboy126

初级会员

帖子: 221
体力: 55
威望: 0
当前: 北京海淀区
离线: 6 天

专长 前端制作,FMS,ROR

16^# 大中小发表于 2006-10-5 11:59

看来楼主对select非常有研究，我有个问题想请教。
Q:select虽然丑陋但是却是唯一可以可以跨框架的下拉菜单，但奇怪的是，对select进行了一些修改后，比如改改背景什么的，跨框架的特性却消失了。楼主以上实例确实丰富，但大部分都失去了跨框架的特性。

TOP

風雲

银牌会员

帖子: 455
体力: 1457
威望: 0
离线: 218 天

17^# 大中小发表于 2006-10-5 16:23

建议加到：置顶 I 中的“ [收藏] JavaScript 经典效果集 - 9月18日更新至第67个效果 ”中。
楼主也是版主，请加到这个里面，谢谢。太好了。

看来以后不需要C/S了，就B/S就行了，以后看来要流行胖客户端了。哈

政府办公自动化http://www.govoa.net

TOP

GIDOT

初级会员

帖子: 113
体力: 97
威望: 0
离线: 57 天

18^# 大中小发表于 2006-11-21 16:36

恭喜你，这些代码在火狐下全部显示错误。

TOP

ttyp

中级会员

帖子: 55
体力: 204
威望: 2
离线: 304 天

19^# 大中小发表于 2006-11-21 16:57

总结的不错，但是似乎少了个分组的select

www.cnblogs.com/ttyp/

TOP

carle

新手上路

帖子: 12
体力: 22
威望: 0
离线: 110 天

20^# 大中小发表于 2006-11-22 09:53

看不出有多大用处。。。

TOP

winhero_charles

幽谷鸟

银牌会员

帖子: 883
体力: 1825
威望: 2
当前: 广东深圳
离线: 52 天

专长 网页设计,JS,ASP

21^# 大中小发表于 2006-11-27 16:44

高手过招。。。

TOP

wxkj8176

中级会员

帖子: 151
体力: 347
威望: 0
离线: 1 天

22^# 大中小发表于 2006-11-27 17:12

输入后显示SELECT里的内容怎么实现呀
比如：输入112
下面显示112
112455
及相关的谢谢

TOP

ilwx1005

初级会员

帖子: 68
体力: 144
威望: 0
离线: 228 天

23^# 大中小发表于 2007-8-28 14:56

有这样的帖子这个论坛何愁不兴啊

..渴望爱情..

TOP

ahwing

ahwing

高级会员

帖子: 494
体力: 956
威望: 0
当前: 广东深圳
离线: 17 天

专长 前端制作,JS

24^# 大中小发表于 2008-3-18 22:02

楼主是一个可爱的人，总是能想到，并做出来一些有趣的东西。

虽然无法兼容，但是效果还是很可爱的。适合无视除了IE之外其他浏览器的人。

:-)

最后赞下。

点滴生活

TOP

no1234

高级会员

帖子: 217
体力: 727
威望: 0
离线: 1 天

25^# 大中小发表于 2008-3-24 18:40

有没有那种数据库版的二级或三级动态下拉菜单，可编辑的SELECT输入字符下拉框可以找出相似的值出来呢？

TOP

lcgtpr

西奥

中级会员

帖子: 742
体力: 223
威望: 0
当前: 辽宁沈阳

专长 网页设计,UI,前端制作

26^# 大中小发表于 2008-4-28 10:54

如果按1楼最下面的方法做，怎么添加点击事件呢？

TOP

zhihuiwu001

初级会员

帖子: 57
体力: 196
威望: 0
当前: 江苏南京
离线: 123 天

27^# 大中小发表于 2008-10-14 10:23

正要找这代码呢

TOP

feifeifanke

新手上路

帖子: 55
体力: 46
威望: 0
当前: 北京海淀区
离线: 29 天

28^# 大中小发表于 2008-10-14 10:43

乱糟糟的，没兼容性

[ 本帖最后由 feifeifanke 于 2008-10-14 10:46 编辑 ]

fanyshowcn

TOP

zzxstr

中级会员

帖子: 129
体力: 229
威望: 0
当前: 北京朝阳区
离线: 3 天

29^# 大中小发表于 2008-11-13 11:49

只是说修改一下select的样式，怎么跑出这么多东西来了。

TOP

adicare

初级会员

帖子: 32
体力: 74
威望: 0
离线: 2 天

30^# 大中小发表于 2008-11-25 17:15

高手是在过招

TOP