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

转载 2007年09月18日 08:54:00
<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 

不能绑定数据

相关文章推荐

MFC List Control 控件添加单元格编辑和单元格下拉列表项

原理很简单:就是在点击到列表相应单元格的时候,在相应的位置生成一个跟单元格大小相当的编辑框或者下拉列表框并贴在单元格上面而已。 实现如下: 在对话框类声明中添加如下变量和函数:头文件中添加:int ...
  • bao_bei
  • bao_bei
  • 2016年06月17日 11:42
  • 2908

MFC List Control控件添加单元格编辑和单元格下拉列表项以适用于数据库相关操作

作为现代的软件,往往是连着数据库的,而连着和操作方便之间,还有着用户界面这道坎。MFC是Windows上比较好开发用户界面的封装类,然而其自带的控件中没有对于数据库表格支持较好的控件,这时利Activ...

JavaScript解析Json实现动态修改多级下拉选择列表控件Select

最终效果: 根据上级菜单所选,决定下级菜单的列表项内容 数据源 首先读取数据库中的数据得到数据,由于数据库中的数据是分散的几个二维表格,查询出来的数据是Map键值对的List集合,不能直接拿来用...

ASP.NET自定义Web服务器控件-DropDownList/Select下拉列表控件

using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; usin...

实现select下拉选项可编辑

  • 2016年01月16日 21:11
  • 9KB
  • 下载

弹出下拉编辑控件,跟踪输入内容自动过滤查询,过滤条件完全自定义,支持TextBox,支持DataGridView(弹出查询对话框),支持DevExpress 8.2的TextEdit,Gridview

 控件功能强大,在逐字输入同时,根据自定义的查询条件弹出一个查询表格,显示符合的内容,同时可定为必选或可选,若定义必选,则必须查询结果唯一才能通过,同时可读取key值,基于DataGridView或G...

c#可编辑可下拉控件

  • 2008年11月24日 13:19
  • 1.05MB
  • 下载

可编辑下拉列表框源码

  • 2013年09月25日 12:16
  • 198KB
  • 下载

EasyUI-DataGrid编辑时出现下拉列表框选择,同时修改其它列的值

首先是进行表格式的初始化,主要是为了可以进行编辑//初始化表格 $.extend($.fn.datagrid.methods, { editCell: function (jq, param)...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:web开发(脚本和动态语言) 编辑 下拉列表 select控件 可编辑
举报原因:
原因补充:

(最多只允许输入30个字)