input+div 下拉选择框

前台html页面

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>showOptions</title>

    <style type="text/css">

    body

    {

        font-family: Microsoft YaHei;

        font-size: 14px;

    }

    ul li

    {

        list-style-type: none;

        margin-left: -40px;

    }

    #MenuOption

    {

        border: 1px solid #CCCCCC;

        width: 210px;

        margin-top: -10px;

        display: none;

    }

    </style>

    <script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>

    <script src="../../Scripts/jsTest.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            //清空文本框

            $("#txtSelect").val('');

            //展示的数据格式

            var jsonValue = [{ "ManaId": , "ManaDisplay": "食品类", "rows": [{ "OptId": , "OptName": "肯德基" }, { "OptId": , "OptName": "麦当劳"}] }, { "ManaId": , "ManaDisplay": "科技类", "rows": [{ "OptId": , "OptName": "宇宙飞船" }, { "OptId": , "OptName": "神州七号"}]}];

            //调用jsTest.js 中的selectOptions方法

            var param = {

                "json": jsonValue,

                "MenuOption": "MenuOption", //显示下拉框数据 div 的Id

                "txtSelect": "txtSelect"   //input 文本框的Id

            };

            //调用jsTest.js 中的selectOptions方法

            $("#content").selectOptions(param);

        });

    </script>

</head>

<body>

   <div style="margin-left: 200px; width: 200px;" id="content">

    <input type="text" id="txtSelect" style="font-family: Microsoft YaHei; width: 210px;font-size: 14px; height: 25px; border: 1px solid #CCCCCC;" />

    <div id="MenuOption">

    </div>

</div>

</body>

</html>

jsTest.js 文件

(function ($) {

    $.fn.selectOptions = function (options) {

        var defaults = {

            MenuOption: "", //对应html页面中div的Id

            json: "",      //对应html页面的json格式数据

            txtSelect: "" //对应html页面input文本框的Id

        };

        var options = $.extend(defaults, options);   //继承defaults中的参数

        $.each(options.json, function (key, value) { //循环遍历json数据 (简称:第一层数据)

            //动态的添加div元素

            $('<div style="margin-left:20px; margin-top:10px;">' + value.ManaDisplay + '</div>').appendTo("#" + options.MenuOption);

            //动态的添加ul 和li 元素

            var ul = $('<ul class="ulOpt"></ul>').appendTo("#" + options.MenuOption);

            $.each(value.rows, function (key, jsonData) {  //通过第一层数据 循环遍历第二层(rows:[{}])中的数据

                var current;

                var li = $('<li></li>').appendTo(ul)

                    .bind('mouseover', function () {

                        current = $(this).css('background-color');

                        $(this).css('background-color', '#CCCCCC');

                    }).bind('mouseout', function () {

                        $(this).css('background-color', current);

                    });

                //动态的添加div checkbox 元素

                var div = $('<div style="margin-left:50px;"></div>').appendTo(li);

                var chk = $('<input class="chk" type="checkbox" id=' + jsonData.OptId + ' />').appendTo(div)

                    .bind('click', function () {

                        //获选中的checkbox

                        var checked = $("#" + options.MenuOption + " input[type=checkbox]:checked");

                        var checkValue = ',';

                        var checkId = ',';

                        //遍历选中的checkbox并且获取到checkbox 对应的Id 和span中的值

                        $.each(checked, function (key, value) {

                            checkId += $(this).attr('id') + ",";

                            checkValue += $(this).siblings("span").text().replace(/(^\s+)|(\s+$)/g, '') + ","; //剔除空格

                        });

                        checkValue = checkValue.substring(, (checkValue.length - )); //把checkValue前后的',' 逗号 去掉

                        if (checked.length == ) {

                            checkValue = "";

                        }

                        checkId = checkId.substring(, (checkId.length - )); //获取到checkbox对应的Id的值

                        $("#txtSelect").val(checkValue);

                    });

                var span = $('<span> &nbsp &nbsp' + jsonData.OptName + '</span>').appendTo(div);

            });

        });

        //点击的元素当ID为传进来param 参数中的input的Id(txtSelect) 和显示数据的div的Id(MenuOption) 时显示div 否则隐藏

        $("body").bind('click', function (e) {

            var target = $(e.target);

            if (target.closest("#" + options.MenuOption).length ==  && target.closest("#" + options.txtSelect).length == ) {

                $("#" + options.MenuOption).hide();

            } else {

                $("#" + options.MenuOption).show();

            }

            e.stopPropagation();

        });

    };

})(jQuery);

插入一张效果图

aaarticlea/png;base64,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" alt="" />

input+div 下拉选择框的更多相关文章

Bootstrap 表单控件一（单行输入框input，下拉选择框select ，文本域textarea）
单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...
基于jQuery美化联动下拉选择框
今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...
ul+jquery自定义下拉选择框
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
java、easyui-combotree树形下拉选择框
最近一直在研究这个树形的下拉选择框,感觉非常的有用,现在整理下来供大家使用: 首先数据库的表架构设计和三级菜单联动的表结构是一样,(父子关系) 1.下面我们用hibernate建一下对应的额实体类: ...
HTML、CSS小知识--兼容IE的下拉选择框select
HTML <div class="s_h_ie"> <select id="Select1" disabled="disabled& ...
Bootstrap系列 -- 15. 下拉选择框select
Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple.Bootstrap框架会为这些元素提供统一的样式风格 <form role=&quo ...
背水一战 Windows 10 (105) - 通知（Toast）: 带按钮的 toast, 带输入的 toast（文本输入框，下拉选择框）
[源码下载] 背水一战 Windows 10 (105) - 通知(Toast): 带按钮的 toast, 带输入的 toast(文本输入框,下拉选择框) 作者:webabcd 介绍背水一战 Wind ...
jQuery插件——下拉选择框
其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $. ...
一款javascript实现的超炫的下拉选择框
今天为给大家带来一款javascript实现的超炫的下拉选择框.下拉的列表由半用透明的幽灵按钮组成.显示下拉的时候,列表项由左右两侧飞入.消息时飞向左右两侧.一起看下效果图在线预览源码下载实 ...

随机推荐

UVA 11762 Race to 1（记忆化+期望）
题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=20869 [思路] DP+期望. 设f[x]表示从x转移到1的期望操 ...
将cocos的app直接在我的设备上测试运行
首先,你要有一个写好了的,准备在真机上测试的cocos程序. 1.设置ARC,设置的过程在另外一篇博文上有写. 2.在Target的Build Setting里面找到Valid Archs 删除里面 ...
Codevs 3304 水果姐逛水果街Ⅰ 线段树
题目: http://codevs.cn/problem/3304/ 时间限制: 2 s 空间限制: 256000 KB 题目等级 : 钻石 Diamond 题解题目描述 D ...
Howto Setup yum repositories to update or install package from ISO CDROM Image
Step # 1: Mount an ISO file Type the following command (replace iso file name with the actual iso fi ...
lightoj 1018 dp
题目链接:http://lightoj.com/volume_showproblem.php?problem=1018 #include <cstdio> #include <cst ...
lightoj1017 dp
题目链接:http://lightoj.com/volume_showproblem.php?problem=1017 #include <cstdio> #include <cst ...
record
http://www.cnblogs.com/90zeng/p/python_translation.html http://www.cnblogs.com/netfocus/p/4478094.ht ...
linux —— shell 编程（编程语法）
导读本文为博文linux —— shell 编程(整体框架与基础笔记)的第4小点的拓展.(本文所有语句的测试均在 Ubuntu 16.04 LTS 上进行) 目录再识变量函数条件语句循环语句 ...
UML类图详细介绍
类图主要描述程序对象以及他们之间的关系.一般来说,类.接口.抽象类这些程序对象的区别很容易,但是他们之间六种关系以前总是理解不够深刻,这次进行了一次复习,顺便写成博文以便加深理解类图中的三种对象类 ...
WinForm中关于控件焦点的问题
方法一: 在打开一个窗体时,我们往往需要设置焦点让光标出现在我们希望它出现的位置上. 这时我们可以在窗体的Activated事件中设置焦点例如我们希望光标在打开窗体的时候出现在textBox1上,我 ...

input+div 下拉选择框

input+div 下拉选择框的更多相关文章

随机推荐

热门专题