可编辑下拉框的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>
<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>
相关推荐
-
可编辑下拉框的2种实现方式
可编辑下拉框-HTML 复制代码 代码如下: <div style="position:relative;"> <select style="width:120px;" onchange="document.getElementById('input').value=this.value"> <option value="A类">A类</option> <option va
-
antd多选下拉框一行展示的实现方式
我们都知道antd的select多选时,如果下拉框宽度不足,则自动浮动到下一行将下拉框撑大,但是这回影响到页面的整体布局. 我们期望的效果是,下拉框只显示一行的值,超出一行的部分自动隐藏. 下面有2种方案来实现这个效果. 1.利用浮动原理 设置下拉框的最大高度为一行的高度,然后超出的部分隐藏. .ant-select-selection--multiple { max-height: 32px; overflow: hidden; } 这种方式存在的弊端是如果有2个选项,一个很短一个很长,那么只
-
bootstrap可编辑下拉框jquery.editable-select
下载链接地址:链接: https://pan.baidu.com/s/1pLl0uCj 密码: cd59 然后直接请看代码: 引用: <script type="text/javascript" src="${ contextPath }/res/sys/scripts/jquery.editable-select.min.js"></script> <link href="${ contextPath }/res/sys/s
-
基于jquery实现的可编辑下拉框实现代码
原理就是一个textbox加一个ul模拟下拉框,用font模拟一个下拉按钮. 一.制作静态效果 先用css和html,做出一个应该有的样子.这里这两个我使用的是字体,可以在icomoon网站上面自己制作.用字体的好处是和输入框定位很方便,而且还可以控制大小颜色等,唯一的不足是IE6和IE7由于不支持:before选择器,导致无法显示这种字体,但可以通过一些其他方法实现,大家可以自己尝试下.下面是html代码 <span style="display:inline-block;positio
-
jQuery操作选中select下拉框的值代码实例
这篇文章主要介绍了jQuery操作选中select下拉框的值代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 js和jQuery联合操作dom真的很好用,如果不是专业前端人员的话,我觉得吧前端语言只要熟练掌握js和jQuery就可以了. 获取select下拉框的几种情况如下: 1.获取第一个option的值 $('#test option:first').val(); 2.最后一个option的值 $('#test option:last
-
Jquery Easyui自定义下拉框组件使用详解（21）
本文实例为大家分享了Jquery Easyui自定义下拉框组件的实现代码,供大家参考,具体内容如下 加载方式 JS调用加载 自定义下拉框不能通过标签的方式进行创建. <input id="box" /> <script> $(function () { //JS 加载调用 $('#box').combo({ required : true, multiple : true, }); }); </script> 属性列表 <script>
-
Android使用Spinner实现城市级联下拉框
最近写一个使用Spinner实现城市级联下拉框的Dome,现在总结一下,第一次写博客,互相学习. activity_main.xml里面有三个Spinner <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_
-
ASP .NET 可编辑输入自动匹配的下拉框
一. 引用dll文件 二. aspx前台页面应用该控件 <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %> 小区: <teler
-
Easyui和zTree两种方式分别实现树形下拉框
最近工作中需要用到树形下拉框,因为项目中树形结构使用的是zTree,然后就百度,结果出来效果不好看,后来就试着用了easyui的comboTree,虽然比较好看,但是跟整体的bootstrap风格有点儿不搭.现在贴出来两种方式及效果,以后备用. 方式一,使用zTree 前端代码: <div class="form-group"> <label>点击事件:</label> <input id="selectActionType"
-
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
例如"报告交付方式"包含固定交付时,第二个下拉框不可编辑,反之可以编辑,具体代码如下 报告交付方式: <select class="easyui-combobox" panelHeight="auto" style="width:195px" data-options="required:true,valueField:'id',textField:'text' , onSelect:function(){ v