web开发(脚本和动态语言) 编辑下拉列表 select控件可编辑

最新推荐文章于 2021-06-03 13:40:38 发布

chenshizero

最新推荐文章于 2021-06-03 13:40:38 发布

阅读量943

点赞数

分类专栏：脚本文章标签： web开发脚本语言 function input border

脚本专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<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>