前台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);
插入一張效果圖
