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> *///创建用于显示隐藏的tableDivvar _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()+ ';';
??? });
?