前台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": 1, "ManaDisplay": "食品类", "rows": [{ "OptId": 1, "OptName": "肯德基" }, { "OptId": 2, "OptName": "麦当劳"}] }, { "ManaId": 2, "ManaDisplay": "科技类", "rows": [{ "OptId": 3, "OptName": "宇宙飞船" }, { "OptId": 4, "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(1, (checkValue.length - 1)); //把checkValue前后的‘,‘ 逗号 去掉 if (checked.length == 0) { checkValue = ""; } checkId = checkId.substring(1, (checkId.length - 1)); //获取到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 == 0 && target.closest("#" + options.txtSelect).length == 0) { $("#" + options.MenuOption).hide(); } else { $("#" + options.MenuOption).show(); } e.stopPropagation(); }); }; })(jQuery);
插入一张效果图
原文：http://www.cnblogs.com/andyNet/p/3533398.html