网站首页 > 技术文章正文

给layui select元素的下拉选项增加title提示

nanyue 2024-09-21 19:59:10 技术文章 5 ℃

需求：

开发商城项目时，促销活动管理模块中添加促销活动的时候需要选择某个商品分类参与促销，并且在商品分类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>

上一篇：湾岸传说|起底大阪湾岸最速车队（大阪湾地理位置）
下一篇：澳洲最大杏仁生产商Select Harvests旗下站点发生火灾事件

网站首页 > 技术文章 正文

给layui select元素的下拉选项增加title提示

猜你喜欢

网站首页 > 技术文章正文