input + div 下拉選擇框
阿新 • • 發佈：2018-11-28
前臺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);