`

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>';
            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()+ ';';
    });

 

分享到:
评论
1 楼 muqingren 2012-08-24  
 

相关推荐

    jQuery支持模糊查询下拉框菜单选择代码

    使用jQuery,我们可以轻松地获取或修改下拉框中的选项,例如,使用`$('select').children('option')`选取所有选项。 四、事件监听 为了实现模糊查询,我们需要监听用户的输入事件。jQuery提供了`keyup`、`keydown`...

    jquery实现的多选下拉框

    核心文件通常包括CSS样式表(如`multiselect.css`)和JavaScript脚本(如`jquery.multiselect.js`或`jquery.multiselect.min.js`)。我们需要在网页中引用这些资源,以确保插件正常工作。 安装完成后,我们可以通过...

    jquery实现可多选下拉框

    本文将深入探讨如何使用 jQuery 来实现一个可多选的下拉框功能,这对于创建交互性强的用户界面非常有用。下面我们将详细讲解实现这个功能的关键步骤和涉及的技术点。 首先,我们需要一个 HTML 结构来定义我们的多选...

    jquery动态创建联动下拉框

    总结来说,使用jQuery动态创建联动下拉框涉及的主要知识点包括:DOM操作(如`val()`、`on()`、`empty()`、`append()`),Ajax请求(`$.ajax()`或`$.get()`),以及JSON数据的解析和处理。通过这些技术,我们可以构建...

    基于jquery实现的多选下拉框

    这篇教程将详细介绍如何利用jQuery库来创建这样一个功能丰富的多选下拉框。 首先,我们需要理解jQuery的基本用法。jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画设计和Ajax交互。在这个项目...

    jquery 三级联动下拉框

    jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框

    jquery实现Google自动下拉框

    ### 使用jQuery 1.3实现Google自动下拉框功能解析 #### 一、背景与目的 随着Web技术的发展,用户体验成为衡量网站质量的重要标准之一。其中,自动完成(Auto Complete)功能作为提升用户输入效率的有效手段,在众多...

    网页模板——javascript 美化单选 多选和下拉框 最好用的树形下拉框组件(单选、多选均可).zip

    "网页模板——javascript 美化单选 多选和下拉框 最好用的树形下拉框组件(单选、多选均可)" 提供了一种解决方案,通过JavaScript技术来优化网页中的选择元素,如单选按钮、复选框以及传统的下拉框,尤其是强调了树形...

    IOS应用源码——一个自己写的下拉框组件,需要者自取 comboBox.zip

    IOS应用源码——一个自己写的下拉框组件,需要者自取 comboBox.zip

    基于jQuery实现的自定义下拉框控件

    2. **jQuery选择器与事件绑定**:接下来,我们需要使用jQuery选择器找到这个元素,并绑定点击事件来展示或隐藏下拉菜单。例如: ```javascript $('.dropdown-toggle').on('click', function() { $(this).next('....

    使用jquery写的级联下拉框

    使用jquery写的级联下拉框,使用jquery写的级联下拉框

    jQuery手机下拉框select

    - 在使用jQuery Mobile Select Menu时,确保页面结构遵循jQuery Mobile的页面模型,即每个页面都包含在一个`&lt;div data-role="page"&gt;`内。 - 为了性能考虑,避免在大型`&lt;select&gt;`元素上使用增强样式,因为这可能导致...

    jquery 多选项下拉框

    本篇文章将详细探讨 jQuery 实现多选项下拉框的核心概念、实现方法以及相关技术。 一、jQuery 概述 jQuery 是一个广泛使用的 JavaScript 库,它简化了 JavaScript 的DOM操作、事件处理、动画设计和Ajax交互。通过...

    jquery可编辑的下拉框combox

    而使用jQuery,我们可以创建更动态、交互性更强的ComboBox,提高用户体验。 要实现一个jQuery可编辑的下拉框ComboBox,你需要以下几个关键步骤: 1. **HTML结构**:创建基础的HTML元素,包括一个输入框和一个隐藏...

    jquery+html自定义select下拉框,下拉框美化

    本文将详细介绍如何使用jQuery和HTML来创建自定义的下拉框,并对其进行美化和优化。 首先,我们要明白HTML的`&lt;select&gt;`元素是用于创建选项列表的标准方式,但其默认样式通常比较单一,无法满足多样化的界面设计需求...

    html-jquery多语言选择下拉框

    接下来,利用jQuery来监听下拉框的改变事件,并根据用户的选择加载相应的CSS文件。CSS文件通常包含了对应语言的文本内容。这里我们可以使用`$.getScript()`方法来动态加载CSS文件: ```javascript $(document)....

    jQuery插件-多选全选实时搜索下拉框

    1. **DOM操作**:使用jQuery选择器选取需要操作的元素,如`$('select')`或`$('input[type="checkbox"]')`,然后执行增删改查等操作。 2. **事件绑定**:通过`.on()`方法绑定各种事件,如点击事件、输入事件等,响应...

    jquery.multiselect.js多选下拉框选择代码

    《jQuery.multiselect.js:打造高效多选下拉框选择体验》 在Web开发中,下拉框(Dropdown)是常用的一种交互元素,尤其在需要用户从多个选项中进行选择时。然而,传统的HTML `&lt;select&gt;` 标签在处理大量选项或需要...

    jquery下拉框集成搜索功能

    在前端开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互。...在实践中,结合使用jQuery、JavaScript和ECMAScript,我们可以构建出更加交互友好和高效的前端应用。

    jquery 省市联动下拉框

    标题中的“jquery 省市联动下拉框”是指在网页设计中,使用jQuery库实现的一个功能,允许用户从一个下拉框选择省份后,另一个下拉框会自动更新为对应省份的城市列表。这种功能常见于需要用户输入详细地址的表单中,...

Global site tag (gtag.js) - Google Analytics