关闭

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

678人阅读 评论(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>

<body>
<table border="1">
 <tr><td width="100px">
  <select name="slt" style="width:100px" onchange="sltChg(this)">
  <option></option>
  <option value="1">甲乙丙</option>
  <option value="2">ABC</option>
  <option value="3">一二三</option>
  <option>新增...</option>
  </select>
 </td><td width="100px">
  <select name="slt" style="width:100px" onchange="sltChg(this)">
  <option></option>
  <option value="1">甲乙丙</option>
  <option value="2">ABC</option>
  <option value="3">一二三</option>
  <option>新增...</option>
  </select>
 </td></tr>
</table>
</body>
</html>

拷贝后直接运行可见效果。不支持FF 

不能绑定数据

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:316178次
    • 积分:4150
    • 等级:
    • 排名:第7395名
    • 原创:50篇
    • 转载:203篇
    • 译文:0篇
    • 评论:77条
    最新评论
    自己收藏的网站