可编辑Select下拉列表控件实现方法(非DIV模拟)
2006-12-09 22:20
1261 查看
<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
<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
相关文章推荐
- 基于jquery的用dl模拟实现可自定义样式的SELECT下拉列表(已封装)
- 用dl模拟实现可自定义样式的SELECT下拉列表(已封装)
- 基于jquery的用dl模拟实现可自定义样式的SELECT下拉列表(已封装)
- 使用js实现一个可编辑的select下拉列表
- jQuery实现动态显示select下拉列表数据的方法
- 使用js实现一个可编辑的select下拉列表
- Java实现的自定义可编辑表格控件(支持汇总、滚动、增行、删行、小数、日期、下拉列表、参照等)
- web开发(脚本和动态语言) 编辑 下拉列表 select控件 可编辑
- JavaScript解析Json实现动态修改多级下拉选择列表控件Select
- JAVA EE 项目经常使用知识 之AJAX技术实现select下拉列表联动的两种使用方法(让你真正理解ajax)
- select表单元素详解及下拉列表模拟实现
- javascript模拟select,jselect的方法实现
- jquery实现触发时更新下拉列表内容的方法
- DevExpress.LookUpEdit控件实现自动搜索定位功能 兼使用方法(looUpEdit可编辑)
- 用js实现生成大量select控件选项的方法
- MFC List Control控件添加单元格编辑和单元格下拉列表项以适用于数据库相关操作
- jQuery实现Select下拉列表进行状态选择功能
- 用DIV制作即时提示层 防止被select控件遮挡的方法
- JavaScript实现对下拉列表值进行排序的方法
- 实现html中select下拉列表中部分选项不可选