可编辑下拉框的2种实现方式
<div style="position:relative;">
<select style="width:120px;" onchange="document.getElementById('input').value=this.value">
<option value="A类">A类</option>
<option value="B类">B类</option>
<option value="C类">C类</option>
<option value="D类">D类</option>
</select>
<input id="input" name="input" style="position:absolute;width:99px;height:16px;left:1px;top:2px;border-bottom:0px;border-right:0px;border-left:0px;border-top:0px;">
</div>
可编辑下拉框-JS
<html>
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>可编辑下拉框</title>
</head>
<body>
<table style="border:2px outset;background-color:#d2e8FF" width="250" height="100" align="center">
<tr>
<td width="60%" height="30" align="center">
<select name="fason">
<option value="可编辑下拉框">可编辑下拉框</option>
<option value="作者">作者</option>
</select>
</td>
</tr>
</table>
<script language="javascript">
function combox(obj,select){
this.obj=obj
this.name=select;
this.select=document.getElementsByName(select)[0];
/*要转换的下拉框*/
}
/*初始化对象*/
combox.prototype.init=function(){
var inputbox="<input name='combox_"+this.name+"' onchange='"+this.obj+".find()' "
inputbox+="style='position:absolute;width:"+(this.select.offsetWidth-16)+";height:"+this.select.offsetHeight+";left:"+getL(this.select)+";top:"+getT(this.select)+"'>"
document.write(inputbox)
with(this.select.style){
left=getL(this.select)
top=getT(this.select)
position="absolute"
clip="rect(0 "+(this.select.offsetWidth)+" "+this.select.offsetHeight+" "+(this.select.offsetWidth-18)+")"
/*切割下拉框*/
}
this.select.onchange=new Function(this.obj+".change()")
this.change()
}
/*初始化结束*/
////////对象事件定义///////
combox.prototype.find=function(){
/*当搜索到输入框的值时,下拉框自动定位*/
var inputbox=document.getElementsByName("combox_"+this.name)[0]
with(this.select){
for(i=0;i<options.length;i++)
if(options[i].text.indexOf(inputbox.value)==0){
selectedIndex=i
this.change();
break;
}
}
}
combox.prototype.change=function(){
/*定义下拉框的onchange事件*/
var inputbox=document.getElementsByName("combox_"+this.name)[0]
inputbox.value=this.select.options[this.select.selectedIndex].text;
with(inputbox){select();focus()};
}
////////对象事件结束///////
/*公用定位函数(获取控件绝对坐标)*/
function getL(e){
var l=e.offsetLeft;
while(e=e.offsetParent)l+=e.offsetLeft;
return l
}
function getT(e){
var t=e.offsetTop;
while(e=e.offsetParent)t+=e.offsetTop;
return t
}
/*结束*/
</script>
<script language="javascript">
var a=new combox("a","fason")
a.init()
</script>
</body>
</html>
-
本文向大家介绍jQuery实现可编辑的表格实例讲解（2），包括了jQuery实现可编辑的表格实例讲解（2）的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了jQuery实现可编辑表格的具体代码，供大家参考，具体内容如下 我们最终要达到的效果如下： 当单击学号列的时候，可以进行编辑： 当单击ESC的时候，操作取消，当单击回车的时候，修改生效（没有与后台交互） 页面代码如下（asp.net
-
本文向大家介绍请你进行测试：前端下拉框实现，测试下拉框定位方式相关面试题，主要包含被问及请你进行测试：前端下拉框实现，测试下拉框定位方式时的应答技巧和注意事项，需要的朋友参考一下 参考回答： Selenium+Python自动化测试对下拉菜单的定位 1.通过selenium.webdriver.support.ui的Select进行定位 下拉菜单如下图： 定位代码： from selenium.w
-
本文向大家介绍jquery实现下拉框多选方法介绍，包括了jquery实现下拉框多选方法介绍的使用技巧和注意事项，需要的朋友参考一下 一、说明 本文是利用EasyUI实现下拉框多选功能，在ComboxTree其原有的基础上对样式进行了改进，样式表已上传demo，代码如下 二、代码 三、效果 四、下载 案例下载：http://wd.jb51.net:81//201701/yuanma/ComboB
-
本文向大家介绍Vue.js实现可编辑的表格，包括了Vue.js实现可编辑的表格的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Vue.js实现可编辑的表格的具体代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍js实现select下拉框菜单，包括了js实现select下拉框菜单的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现select下拉框菜单的详细代码。分享给大家供大家参考。具体如下： 运行效果截图如下： 具体代码如下： <!DOCTYPE html> 如果大家还想深入学习，可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。 以上就是js实
-
我使用的是X-editable引导版本2 我正在使用codeigniter。但是文本区域和文本框对我来说很好，但是下拉菜单不起作用。 在我看来 在我的控制器里 我刚刚测试了这个输出不工作我尝试了很多技巧，但它似乎不工作。 我想显示从表名合同的详细信息如何我可以得到的值作为一个下拉在x编辑