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实现的超炫的下拉选择框.下拉的列表由半用透明的幽灵按钮组成.显示下拉的时候,列表项由左右两侧飞入.消息时飞向左右两侧.一起看下效果图 在线预览 源码下载 实 ...
随机推荐
- Linq中小心使用IndexOf
我们平常在做字符串的模糊查询时,有可能会用到下面的类似LINQ写法: string.IsNullOrEmpty(_SN) ? true : a.SN.IndexOf(_SN) != -1 这条 ...
- HDOJ/HDU 2550 百步穿杨(注意排序)
Problem Description 时维九月,序属三秋,辽军大举进攻MCA山,战场上两军正交锋.辽军统帅是名噪一时的耶律-James,而MCA方则是派出了传统武将中草药123.双方经过协商,约定在 ...
- poj 1704 Georgia and Bob（阶梯博弈）
Georgia and Bob Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 8656 Accepted: 2751 D ...
- LianLianKan - HDU 4272（状态压缩）
题目大意:有一列数据,可以从最上面的开始连接下面相同的元素,然后消除,不过距离不能超过6,询问最后能不能消除完整个数列. 分析:首先讨论一点最远能消除的地方,比如点的位置是x,如若想要消除x+1位置处 ...
- 各种Markdown处理器的列表
从MarkdownImplementations - Markdown Community Group可以找到一个实现markdown处理器的列表,如下: Name Language Type Des ...
- Qt 学习之路 ：坐标系统
在经历过实际操作,以及前面一节中我们见到的那个translate()函数之后,我们可以详细了解下 Qt 的坐标系统了.泛泛而谈坐标系统,有时候会觉得枯燥无味,难以理解,好在现在我们已经有了基础. 坐标 ...
- Objective-C通过联合存储为类增加属性及原理解析
联合存储实现方式及底层原理解析 作者:wangzz 原文地址:http://blog.csdn.net/wzzvictory_tjsd/article/details/9347981 转载请注明出处 ...
- Java基础知识强化之集合框架笔记22：List集合的三个子类的特点（面试题）
1. List:(面试题List的子类特点)(1)ArrayList: 底层数据结构是数组,查询快,增删慢. 线程不安全,效率高.(2)Vector: 底层数据结构是数组,查询快,增删慢. 线程安全, ...
- 如何使用Jquery获取Form表单中被选中的radio值
$("input[name='opType']:checked").val() -------此方法估计用的比较多,通俗易懂 $("input:radio:checke ...
- partial局部类
局部类型允许我们将一个类.接口或结构分成好几个部分,分别实现在几个不同的.cs文件中. 局部类型适用于以下情况: (1)类型特别大,不宜放在一个文件中实现. (2)一个类型中的一部分代码为自动化工具生 ...