大家好，欢迎来到IT知识分享网。
需求：
开发商城项目时，促销活动管理模块中添加促销活动的时候需要选择某个商品分类参与促销，并且在商品分类select下拉选项中当鼠标移动到某个选项上时显示该商品分类下面具有的商品的数量。
效果展示：
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>给layui select元素的下拉选项增加title提示</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body {
padding: 10px;
}
</style>
</head>
<body>
<form class="layui-form layui-form-pane1" action="" lay-filter="first">
<div class="layui-form-item">
<label class="layui-form-label">商品分类：</label>
<div class="layui-input-block">
<select name="goodsCategory" lay-filter="goodsCategory">
<option value="">请选择商品分类</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<script src="../src/layui.js"></script>
<script>
layui.use(['jquery', 'form'], function () {
var $ = layui.jquery, form = layui.form;
// 商品分类数据初始化
function categoryInit(data) {
var len = data.length;
if (len > 0) {
// 填充商品分类数据
var optionHtml = "";
for (i = 0; i < len; i++) {
var optionTitle = "包含" + data[i].goodsNum + "种商品";
optionHtml += "<option value='" + data[i].categoryId + "' title='" + optionTitle + "'>" + data[i].categoryName + "</option>";
}
$("select[name='goodsCategory']").append(optionHtml);
// 重新渲染数据
form.render("select");
// 给弹出层中显示的dd元素增加title属性
addTitleToDd();
}
}
// 给select弹出层中显示的dd元素增加title属性
function addTitleToDd() {
var multipleOptionObjs = $("select[name='goodsCategory']").find('option');
for (var i = 0; i < $(multipleOptionObjs).length; i++) {
var singleOptionObj = $(multipleOptionObjs)[i];
var categoryId = $(singleOptionObj).attr("value"), title = $(singleOptionObj).attr("title");
if (categoryId != "") {
var ddSelector = "dd[lay-value='" + categoryId + "']";
var ddTitle = (title == undefined) ? "" : title;
var ddObj = $("select[name='goodsCategory']").siblings("div.layui-form-select").find('dl').find(ddSelector);
// dd元素增加title提示
$(ddObj).attr("title", ddTitle);
}
}
}
// 给select的input元素增加title元素
function addTitleToSelectInput(title) {
var inputObj = $("select[name='goodsCategory']").siblings("div.layui-form-select").find('.layui-select-title').find('input');
$(inputObj).attr("title", title);
}
// ajax获取商品分类及商品分类下商品数量数据(这里的数据根据实际情况可能需要通过请求服务端接口获取)
var dataFromAjaxRequest = {
"errno": 0,
"data": [
{ "categoryId": 1, "categoryName": "男装", "goodsNum": 21 },
{ "categoryId": 2, "categoryName": "女装", "goodsNum": 22 },
{ "categoryId": 3, "categoryName": "百货", "goodsNum": 23 },
{ "categoryId": 4, "categoryName": "食品", "goodsNum": 24 },
{ "categoryId": 5, "categoryName": "家电", "goodsNum": 25 },
]
};
categoryInit(dataFromAjaxRequest.data);
// select事件监听
form.on('select(goodsCategory)', function (data) {
var selectedElementTitle = data.elem[data.elem.selectedIndex].title;
// 给select的input元素增加title元素
addTitleToSelectInput(selectedElementTitle);
});
});
</script>
</body>
</html>免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/57683.html
