[我有废话要说]
把早上的控件,换成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,我们可以轻松地获取或修改下拉框中的选项,例如,使用`$('select').children('option')`选取所有选项。 四、事件监听 为了实现模糊查询,我们需要监听用户的输入事件。jQuery提供了`keyup`、`keydown`...
核心文件通常包括CSS样式表(如`multiselect.css`)和JavaScript脚本(如`jquery.multiselect.js`或`jquery.multiselect.min.js`)。我们需要在网页中引用这些资源,以确保插件正常工作。 安装完成后,我们可以通过...
本文将深入探讨如何使用 jQuery 来实现一个可多选的下拉框功能,这对于创建交互性强的用户界面非常有用。下面我们将详细讲解实现这个功能的关键步骤和涉及的技术点。 首先,我们需要一个 HTML 结构来定义我们的多选...
总结来说,使用jQuery动态创建联动下拉框涉及的主要知识点包括:DOM操作(如`val()`、`on()`、`empty()`、`append()`),Ajax请求(`$.ajax()`或`$.get()`),以及JSON数据的解析和处理。通过这些技术,我们可以构建...
这篇教程将详细介绍如何利用jQuery库来创建这样一个功能丰富的多选下拉框。 首先,我们需要理解jQuery的基本用法。jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画设计和Ajax交互。在这个项目...
jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框
### 使用jQuery 1.3实现Google自动下拉框功能解析 #### 一、背景与目的 随着Web技术的发展,用户体验成为衡量网站质量的重要标准之一。其中,自动完成(Auto Complete)功能作为提升用户输入效率的有效手段,在众多...
"网页模板——javascript 美化单选 多选和下拉框 最好用的树形下拉框组件(单选、多选均可)" 提供了一种解决方案,通过JavaScript技术来优化网页中的选择元素,如单选按钮、复选框以及传统的下拉框,尤其是强调了树形...
IOS应用源码——一个自己写的下拉框组件,需要者自取 comboBox.zip
2. **jQuery选择器与事件绑定**:接下来,我们需要使用jQuery选择器找到这个元素,并绑定点击事件来展示或隐藏下拉菜单。例如: ```javascript $('.dropdown-toggle').on('click', function() { $(this).next('....
使用jquery写的级联下拉框,使用jquery写的级联下拉框
- 在使用jQuery Mobile Select Menu时,确保页面结构遵循jQuery Mobile的页面模型,即每个页面都包含在一个`<div data-role="page">`内。 - 为了性能考虑,避免在大型`<select>`元素上使用增强样式,因为这可能导致...
本篇文章将详细探讨 jQuery 实现多选项下拉框的核心概念、实现方法以及相关技术。 一、jQuery 概述 jQuery 是一个广泛使用的 JavaScript 库,它简化了 JavaScript 的DOM操作、事件处理、动画设计和Ajax交互。通过...
而使用jQuery,我们可以创建更动态、交互性更强的ComboBox,提高用户体验。 要实现一个jQuery可编辑的下拉框ComboBox,你需要以下几个关键步骤: 1. **HTML结构**:创建基础的HTML元素,包括一个输入框和一个隐藏...
本文将详细介绍如何使用jQuery和HTML来创建自定义的下拉框,并对其进行美化和优化。 首先,我们要明白HTML的`<select>`元素是用于创建选项列表的标准方式,但其默认样式通常比较单一,无法满足多样化的界面设计需求...
接下来,利用jQuery来监听下拉框的改变事件,并根据用户的选择加载相应的CSS文件。CSS文件通常包含了对应语言的文本内容。这里我们可以使用`$.getScript()`方法来动态加载CSS文件: ```javascript $(document)....
1. **DOM操作**:使用jQuery选择器选取需要操作的元素,如`$('select')`或`$('input[type="checkbox"]')`,然后执行增删改查等操作。 2. **事件绑定**:通过`.on()`方法绑定各种事件,如点击事件、输入事件等,响应...
《jQuery.multiselect.js:打造高效多选下拉框选择体验》 在Web开发中,下拉框(Dropdown)是常用的一种交互元素,尤其在需要用户从多个选项中进行选择时。然而,传统的HTML `<select>` 标签在处理大量选项或需要...
在前端开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互。...在实践中,结合使用jQuery、JavaScript和ECMAScript,我们可以构建出更加交互友好和高效的前端应用。
标题中的“jquery 省市联动下拉框”是指在网页设计中,使用jQuery库实现的一个功能,允许用户从一个下拉框选择省份后,另一个下拉框会自动更新为对应省份的城市列表。这种功能常见于需要用户输入详细地址的表单中,...