用select做选择框与input放在一起总不太和谐.换了吧.
Code
var Report={};
Report.getOffset = function getOffset(e){
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight-2;
while(e=e.offsetParent){
t += e.offsetTop;
l += e.offsetLeft;
}
return{
top : t,left : l,width : w, height : h
}
}
Report.createSelect = function createSelect(obj,filterArray){
var offset= this.getOffset(obj);//在firefox下必须加this,不然报找不到函数。
var size = 0;
$.each(filterArray, function(){
size++;
}
);
var oldDiv = $("#div_" + obj.id);
if(oldDiv.length){
if(oldDiv.css("display")=='none'){
oldDiv.css("display","block");
}
else{
oldDiv.css("display","none");
}
}
else{
var cDiv = $("<div></div>");
cDiv.attr("id","div_" + obj.id);
cDiv.css("position","absolute");
cDiv.css("width",(offset.width) + "px");
cDiv.css("height",size *20 + "px");
cDiv.css("top",(offset.top+offset.height+2) + "px");
cDiv.css("left",offset.left + "px");
cDiv.css("background","#f7f7f7");
cDiv.css("border","1px solid silver");
$(document.body).append(cDiv);
var uUl = $("<ul></ul>");
uUl.attr("id","ul_" + obj.id);
uUl.css("listStyle","none");
uUl.css("margin","0");
uUl.css("padding","0");
uUl.css("fontSize","12px");
cDiv.append(uUl);
$.each(filterArray, function(key, value){
var lLi=$("<li></li>");
lLi.attr("id","li_" + key);
lLi.attr("value",key);
lLi.css("textIndent","4px");
lLi.css("height","20px");
lLi.css("lineHeight","20px");
lLi.text(value);
uUl.append(lLi);
}
);
var liObj=$("li",uUl);
$.each(liObj, function(i,eachLi){
eachLi.onmouseover=function(){
this.style.background="#cccccc";
this.style.color="red";
}
eachLi.onmouseout=function(){
this.style.background="white";
this.style.color="black";
}
eachLi.onclick=function(){
obj.value= this.value;
cDiv.css("display","none");
}
});
}}
test.html
Code
<input type="text" onclick="Report.createSelect(this,{'2':'男','3':'女'})"
readonly="readonly">
</input>
效果:
分享到:
相关推荐
1、使用v-model在select标签上进行数据双向绑定, 2、在data里边添加val:‘ ‘, 3、最后就是监听事件的写法,写在methods之外。 附加:(以下图片借鉴他人,非原创) 以上这篇vue select选择框数据变化监听方法...
转换select选择框为标签式按钮 支持js回发调用 支持disabled选项 支持将多个select设置为一组 支持取消默认选中 示例代码: <select name="simple-select"> <option>One <option>Two <option>Three ...
bootstrap-select下拉选择搜索框,可以多选和单选,用法非常简单,样式美观,项目中经常会使用到,特别选项过多的时候,欢迎大家下载使用
怎么自定义select下拉选择框的样式,使用纯CSS实现,把浏览器默认的样式覆盖掉还是有其他的方法,select靠纯CSS是不能解决这个自定义样式问题,下面为大家讲解下CSS实现的思路
主要介绍了用JavaScript来美化HTML的select标签的下拉列表效果的方法,而且在多浏览器下的兼容效果也得到提升,需要的朋友可以参考下
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动、多选移动和一键全部移动!
Select Multiple 是一个交互友好的,嵌入式的,标准选择框替代品,并且它带有可以激活的多种属性。它有以下特点:以一个不显眼的方式工作完全开源支持键盘提供了一些回调可通过 CSS 完全定制化简洁的代码 ...
实现两个select的不同内容的显示,使得前后不同,实现select的多选,使用bootstrap框架
给bootstarp下拉多选框进行赋值、清空、清除下拉之前选中的勾---调试页面,发现bootstarp框架多选会自带一个span标签,清空与赋值就是把这个span标签重置,在浏览器调试页面中找到这个span标签,通过class选择器,对...
下拉选择框(select)标签 树形菜单(TreeDB)标签<不带Checkbox框> 树形菜单(TreeMenuCheckbox)标签 选项卡(tabs/ Divs)标签 数据查询录入(dataselectinput)标签到 QQ菜单标签 下拉选择框树形菜单 年份选择标签(Year...
下拉选择框(select)标签 树形菜单(TreeDB)标签<不带Checkbox框> 树形菜单(TreeMenuCheckbox)标签 选项卡(tabs/ Divs)标签 数据查询录入(dataselectinput)标签到 QQ菜单标签 下拉选择框树形菜单 年份选择...
今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方案就是用...
下拉菜单选择
附件下载可直接运行,特别好用
js实现input输入框输入信息后出现下拉选择框,下拉框的数据源可以使根据输入的值从数据库中动态获取
html下拉多选框样式,h5下拉多选框整套样式,用layui实现下拉框select多选,取值 layui 多选下拉框 控件 整套样式
数据表格(DBTable)标签 时间日期(DateOrTime)标签 组合选择框(selectDouble)标签 下拉选择框(select)标签 树形菜单(TreeDB)标签<不带Checkbox框> 树形菜单(TreeMenuCheckbox)标签 选项...