[我有废话要说]
把早上的控件,换成JQuery来重新写了~花了一下午。在这个公司主要做文档的工作,还能空出几天时间来学习新东西,这段学习的时间让我feel so good。
[正文——使用jquery来封转下拉框]
需求:
1提供公用的js文件,传入input表单元素和下拉复选框中的key-value对,将该input表单实现下拉复选框,使用jquery实现,避免浏览器不兼容等问题。
看代码前,看看效果吧~喜欢的可以直接下走~不收钱的~~
(旁边的button是为了对比下拉出来的checkbox不影响周围其他空间的显示)
鼠标离开
鼠标进入,上次的选择还是保存在下拉框中不被清楚
/**//**
* Creat date 2011-11-10
* Creat by zhuoyueping
*支持input表单的下拉复选框。
*使用方法:
* (1)调用js函数:setSelectBox(textItem, myArray);
* 参数说明:
* textItem:input表单元素
* myArray:二维数组,存放下拉框中的key-value对。
* (2)特别说明:全局变量均以_开头,有如下2个,使用时注意命名冲突:
_csidiv
_csiinput
* (3)使用实例:
<html>
<head>
<title>my test</title>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="comboSelectBox.js"></script>
<script type="text/javascript">
function testSelectBox(textItem) {
var myArray = new Array();
myArray['one'] = 1;
myArray['two'] = 2;
myArray['three'] = 3;
myArray['4'] = 4;
myArray['5'] = 5;
myArray['6'] = 6;
myArray['7'] = 7;
myArray['8'] = 8;
setSelectBox(textItem, myArray);
}
</script>
</head>
<body>
<form id="mainForm">
实例
<br>在此控件下方显示下拉复选框
<input id="input" onclick="testSelectBox(this);" style="height: 20px; width: 100px;" />
<input type="button" id="Text1" style="height: 20px; width: 100px;" />
</form>
</body>
</html>
*/
//创建用于显示隐藏的tableDiv
var _csidiv;
//用户传入的发生点击事件的input元素
var _csiinput;
function showDiv() {
_csidiv.show();
}
function hideDiv() {
_csidiv.hide();
}
/*
*根据复选框中的数值,更新input表单的显示。
*当下拉框中每个checkbox被点击后,触发刚方法。
*/
function updateValue() {
var value = "";
var array = new Array();
var form = document.getElementById("mainForm");
$('[name=_cbscheckbox]:checkbox:checked').each(function(){
value += $(this).val()+ ';';
});
_csiinput.attr('value', value);
}
function setSelectBox(textItem, myArray) {
_csiinput = $(textItem);
//复选下拉框首次创建,并显示
if (_csidiv == undefined) {
var offset = _csiinput.offset();
var top = offset.top; //控件的定位点top
var height = offset.height; //控件本身的height
var left = offset.left; //控件的定位点left
var width = _csiinput.width();
var top = top + height + 5;
//创建div,包含了一个空table
_csidiv = $('<div id="tableDiv" style="position:absolute;text-align: center;OVERFLOW: auto; SCROLLBAR-BASE-COLOR: #cccccc; HEIGHT: 80px;SCROLLBAR-FACE-COLOR: #ffffff;top:' + top + '; left:' + left + ';WIDTH:' + width + ';Z-INDEX: 1;SCROLLBAR-SHADOW-COLOR:#cccccc;SCROLLBAR-ARROW-COLOR: #cccccc;SCROLLBAR-3DLIGHT-COLOR: #cccccc; background-color: #ffffff; border: 1px solid black"></div>');
_csidiv.mouseover(function () {
showDiv();
});
_csidiv.mouseout(function () {
hideDiv();
});
var csiinput = $('<table id="_csitable"></table>');
//初始化下拉的选项
for (var key in myArray) {
var _csitr = '<tr><td nowrap height="28"><input type="checkbox" name="_cbscheckbox" value="' + key + '" onchange="updateValue()">' + myArray[key] + '</td></tr>';
csiinput.append(_csitr);
}
csiinput.appendTo(_csidiv);
//获取发生时间的input元素的父表单,在该表单最后加入div
var csiform = _csiinput.parent("form");
csiform.append(_csidiv);
}
else {
//该复选下拉的层已经创建了,那么再次点击input表单的时候,显示
showDiv();
}
}
妖孽问题总结:
1:在div创建的时候一起把table创建后,用$('#table').append('<tr>...</tr>')失败,具体原因不明,用上面的方法生成一个table元素后,直接append才成功。
参考:http://stackoverflow.com/questions/171027/add-table-row-in-jquery
2:下面这句话不知道啥意思。。留坑待埋:
$('[name=_cbscheckbox]:checkbox:checked').each(function(){
value += $(this).val()+ ';';
});
分享到:
相关推荐
jQuery支持模糊查询下拉框菜单选择代码
jquery动态创建联动下拉框和jquery动态创建下拉框
网页模板——javascript 美化单选 多选和下拉框 最好用的树形下拉框组件(单选、多选均可)
用jquery 1.3实现的Google自动下拉框
jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框
IOS应用源码——一个自己写的下拉框组件,需要者自取 comboBox.zip
jquery搜索自动提示下拉框插件autocomplete
html中默认的select太丑了,使用jquery+html自定义下拉框。样式随心所欲。
使用jquery写的级联下拉框,使用jquery写的级联下拉框
jquery实现可多选下拉框 代码很简单,有基础的人一看即会,
jQuery手机下拉框select jQuery手机下拉框select jQuery手机下拉框select
jquery获取当前选中下拉框的各个属性
jquery实现的多选下拉框ehynds-jquery-ui-multiselect-widget-1.10-3.zip
jQuery多选和单选下拉框插件
一组经过美化的jQuery select下拉框单选和多选插件,带搜索功能,模拟select下拉框多选菜单选择效果。
jquery省市县联动下拉框,jquery省市县联动菜单,经常用这个,很爽,全国城市数据都是最新的
无聊时自己随便写写的一个可以多选的下拉框,基于jquery1.6版本,下拉选项可以多选。有需要的可以下载看来看看。在ie8、火狐、谷歌、360极速上运行有效。其它浏览器未知=。=
自己编写的一个jquery多选checkbox下拉框,已经封装好了,直接调用就可以
使用jquery做的div下拉框,下拉列表。
jquery--下拉框的实现jquery--下拉框的实现