下拉列表select控件-控件新闻-慧都网

产品

产品
资讯
资源
视频
学院
示例

下拉列表select控件

翻译|其它|编辑：郝浩|2007-09-18 11:12:10.000|阅读 1050 次

概述：

<html>
<head>
<title> Select 控件可编辑 </title>
<script>
function sltChg(o){
if(o.options[o.selectedIndex].text == "新增..."){
  var newObj = document.createElement("<input type='text' style='width:100px' name='"+o.name+"'>")
  newObj.ondblclick = function(){ //双击回到select控件状态
   var selectObj = genSelectObject(o.name);
   this.insertAdjacentElement("afterEnd",selectObj);
   this.parentNode.removeChild(this);
  }
  o.insertAdjacentElement("afterEnd",newObj);
  o.parentNode.removeChild(o);
  newObj.focus();
}
}
function genSelectObject(strName){
//此处可采取更灵活的方式写
//如可采用 xmlhttp 从后台传回。这样可实现 select 控件的实时更新，将新增项目增加进 select 的 option
var obj = document.createElement("<select name='"+strName+"'>");
obj.style.width = "100px";
obj.onchange = function(){sltChg(this);};
var opt = new Option("","");
obj.add(opt);
opt = new Option("甲乙丙","1");
obj.add(opt);
opt = new Option("ABC","2");
obj.add(opt);
opt = new Option("一二三","3");
obj.add(opt);
opt = new Option("新增...","") //选择此项进入 input 控件状态
obj.add(opt);
return obj;
}
</script>
</head>