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实现的超炫的下拉选择框.下拉的列表由半用透明的幽灵按钮组成.显示下拉的时候,列表项由左右两侧飞入.消息时飞向左右两侧.一起看下效果图 在线预览 源码下载 实 ...
随机推荐
- [IoLanguage]Io Tutorial[转]
Io Tutorial Math Io> 1+1 ==> 2 Io> 2 sin ==> 0.909297 Io> 2 sqrt ==> 1.414214 ...
- OpenStack学习推荐
前言: 学习.了解.安装部署OpenStack也写了好一段时间了,现在觉得也有点必要写点总结.搞IT这一块基本就这样,不管是搞什么领域,一个项目超过两个月没动它,就基本不知道当时是怎么搞的,当时学 ...
- C/C++基础（二）
(1)运算符优先级 #include <cstdio> using namespace std; int main() { unsigned char a = 0xA5; un ...
- 访问者模式(Visitor)
@@@模式定义: 表示一个作用于某对象结构中的各元素的操作.它使你可以在不改变各元素的类的前提下 定义作用于这些元素的新操作. @@@练习示例: 扩展客户管理的功能 @@@示例代码: \patter ...
- sdut-2725-The Urge to Merge-状压DP
把数组竖起来,从上往下走. 如果当前位置是竖着乘的,那么第一个点标记为1.否则标记为0. 样例最终的状态为: 0 0 1 0 1 0 1 0 0 0 0 0 #include<iostream& ...
- C# 打开PPT文件另存为PPTX
/// <summary> /// rename PPT /// </summary> private static void renamePPT() { //add refe ...
- POJ 3277 City Horizon
标题效果: 每间房子的长度给出阴影(在间隔代表)而高度,求阴影总面积. 解题思路:矩形面积并. 以下是代码: #include <set> #include <map> #in ...
- jQuery作用
jquery是前端里面比较总要的,是很强大的一个选择器. 表单: 1.$(":input") 查找所有的input元素 2.$("text") 匹配所有的 ...
- vs2013下的WCFRest 模板开发WCF
在vs2013下使用wcfRestservice40 是安装不成功的,尝试多遍,都是这样.查看以前vs2012做的wcfrest,经过调教,终于在vs2013下也可以了! 1.新建wcf服务应用程序 ...
- android 高德地图API 之 java.lang.UnsatisfiedLinkError: Couldn't load amapv3: findLibrary returned null错误
错误场景: 运行android app时,在运行到调用高德地图API时,出现 “java.lang.UnsatisfiedLinkError: Couldn't load amapv3: findLi ...