JS第三篇——用Jquery来封装小弟我的上拉框
日期：2014-05-16 浏览次数：20424 次
JS第三篇——用Jquery来封装我的下拉框
[我有废话要说]
???? 把早上的控件，换成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>';
c
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
