JSP中可编辑的下拉列表框

方法一：

<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>可编辑下拉框</title>
<script language="javascript">
 function editable(select1){
    if(select1.value == ""){
       var newvalue = prompt("请输入","");
    if(newvalue){
       addSelected(select1,newvalue,newvalue);
    }
    }
 }
 
 function addSelected(fld1,value1,text1){
  if (document.all) {
       var Opt = fld1.document.createElement("OPTION");
    Opt.text = text1;
    Opt.value = value1;
    fld1.options.add(Opt);
    Opt.selected = true;
  }else{
       var Opt = new Option(text1,value1,false,false);
    Opt.selected = true;
    fld1.options[fld1.options.length] = Opt;
  }
 }
</script>
</head>
<body>
<select name="markcode" onChange="editable(this);">
 <option value="value1">选项一</option>
 <option value="">请输入</option>
</select>
</body>
</html>

方法二：

<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>可编辑下拉框</title>
<style>
a{color:blue;text-decoration:none}
a:hover{color:red}
</style>
</head>
<body>
<table style="border:2px outset;background-color:#d2e8FF" width="250" height="100" align="center">
  <tr>
    <td width="100%" align="center" colspan="2"><b>可编辑下拉框</b></td>
  </tr>
  <tr>
    <td width="60%" height="30" align="center">
<select name="fason">
<option value="可编辑下拉框">可编辑下拉框</option>
<option value="作者:阿信">阿信</option>
</select>
    </td>
    <td width="40%" height="30" align="left">
    <input type=button value=" 取值 " onclick="alert(document.getElementsByName('combox_fason')[0].value)">
</td>
  </tr>
</table>
<script language="javascript">
/*
作者：fason(阿信)
日期：2003-7-1
版本：v1.0
备注：只作技术交流，如需转载请注明作者等有关信息，多谢合作
*/
function combox(obj,select){
this.obj=obj
this.name=select;
this.select=document.getElementsByName(select)[0];
/*要转换的下拉框*/
}
/*初始化对象*/
combox.prototype.init=function(){
var inputbox="<input name='combox_"+this.name+"' onchange='"+this.obj+".find()' "
inputbox+="style='position:absolute;"+(this.select.offsetWidth-16)+";height:"+this.select.offsetHeight+";left:"+getL(this.select)+";top:"+getT(this.select)+"'>"
document.write(inputbox)
with(this.select.style){
left=getL(this.select)
top=getT(this.select)
position="absolute"
clip="rect(0 "+(this.select.offsetWidth)+" "+this.select.offsetHeight+" "+(this.select.offsetWidth-18)+")"
/*切割下拉框*/
}
this.select.onchange=new Function(this.obj+".change()")
this.change()
}
/*初始化结束*/
////////对象事件定义///////
combox.prototype.find=function(){
/*当搜索到输入框的值时,下拉框自动定位*/
var inputbox=document.getElementsByName("combox_"+this.name)[0]
with(this.select){
for(i=0;i<options.length;i++)
if(options[i].text.indexOf(inputbox.value)==0){
selectedIndex=i
this.change();
break;
}
}
}
combox.prototype.change=function(){
/*定义下拉框的onchange事件*/
var inputbox=document.getElementsByName("combox_"+this.name)[0]
inputbox.value=this.select.options[this.select.selectedIndex].text;
with(inputbox){select();focus()};
}
////////对象事件结束///////
/*公用定位函数(获取控件绝对坐标)*/
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
}
/*结束*/
</script>
<script language="javascript">
var a=new combox("a","fason")
a.init()
/*作用方法：
var obj=new combox(var1,var2)
var1:新生成的combox变量(如:a)
var2:原下拉框的name
obj.init():对象初始化
注意:后台取值时用combox_var2进行取值
*/
</script>
<p align="right">作者：<a href="http://fason.nease.net">fason(阿信）</a>欢迎交流!</p>
</body>
</html>
下面这段代码更强！
<input type="text" name="t">
<select name="s" onChange="t.value=this.options[this.selectedIndex].value;">
<option>-----------</option>
<option value="test">test</option>
<option value="haha">haha</option>
</select>
<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:1px solid #ffffff;}
.td_over{FONT-FAMILY: Courier New, Courier;font-size:12px;cursor:default;background-color:#3366cc;border:1px 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:0px 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:1px solid #9fA3Ce;writing-mode:tb-rl;font-weight:bold
}
.seldiv{
position:absolute;z-index:1000;overflow-x:hidden;border-left:1px solid #000000;border-bottom:1px solid #000000;border-right:1px 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.getElementByIdx("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.getElementByIdx('ZfData_'+j);
   sv=document.getElementByIdx('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>
</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/meronzhang/p/3002687.html