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>    ' + 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实现的超炫的下拉选择框.下拉的列表由半用透明的幽灵按钮组成.显示下拉的时候,列表项由左右两侧飞入.消息时飞向左右两侧.一起看下效果图 在线预览 源码下载 实 ...
随机推荐
- 用Delphi直接获取bmp图片的像素
用Delphi直接获取bmp图片的像素,并存储显示出.(此像素主要用在LED上显示).希望高手能给出代码啊!! function getImagePixels(f: string): Integer; ...
- [转]使用Linux命令行测试网速
装speedtest-cli speedtest-cli是一个用Python编写的轻量级Linux命令行工具,在Python2.4至3.4版本下均可运行.它基于Speedtest.net的基础架构来测 ...
- SRM 388(1-250pt)
题意:定义一个数为k-smooth,如果它最大的质因子不超过k.给定n和k,求不超过n的,k-smooth的数有多少个.(k <= 100, n <= 10^5) 解法:对于一个数t,判断 ...
- hdoj 1045 Fire Net
Fire Net Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Su ...
- 查询grep结果的前后n行
linux系统中,利用grep打印匹配的上下几行 如果在只是想匹配模式的上下几行,grep可以实现. $grep -5 'parttern' inputfile //打印匹配行的前后5行 ...
- 什么是staging server
原文链接:http://blog.csdn.net/blade2001/article/details/7194895 软件应用开发的经典模型有这样几个环境:开发环境(development).集成环 ...
- Cookie及App登陆的原理
1.Cookie Cookie意为"甜饼",是由W3C组织提出的.目前Cookie已经成为标准.由于HTTP是一种无状态的协议,服务器单从网络连接上无从知道客户身份.怎么办呢?就给 ...
- 用python正则表达式提取字符串
在日常工作中经常遇见在文本中提取特定位置字符串的需求.python的正则性能好,很适合做这类字符串的提取,这里讲一下提取的技巧,正则表达式的基础知识就不说了,有兴趣的可以看re的教程. 提取一般分两种 ...
- winform 加密 解密 分类： WinForm 2014-05-16 15:05 400人阅读 评论(0) 收藏
界面显示: 加密: 解密: 代码实现: public string EncryptString(string str) { #region 加密程序 ...
- 【Android - MD】之TabLayout的使用
TabLayout是Android 5.0新特性--Material Design中的一个控件,是一个标签页的导航条,常结合ViewPager完成页面导航. 和其他MD控件一样,使用TabLayout ...