如何使用Syncfusion EJ2 MultiSelect实现多选列表前3项免费、超出计费并展示总额

实现方案 #

你可以直接使用下方修改后的完整代码，已经适配你现有Syncfusion MultiSelect组件的样式，同时满足前3个选中项免费、超出后每个收费200美元、实时展示总费用的需求：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <h2>选择需要的课程</h2>
  <!-- Essential JS 2 MultiSelect的material依赖主题 -->
  <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
  <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css" />
  <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" type="text/css" />

  <!-- Essential JS 2 MultiSelect依赖脚本 -->
  <script src="//cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
  <script src="//cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
  <script src="//cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
  <script src="//cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
  <script src="//cdn.syncfusion.com/ej2/ej2-lists/dist/global/ej2-lists.min.js" type="text/javascript"></script>
  <script src="//cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
  <script src="//cdn.syncfusion.com/ej2/ej2-dropdowns/dist/global/ej2-dropdowns.min.js" type="text/javascript"></script>
</head>

<body>
  <!-- 多选列表输入框 -->
  <input type="text" tabindex="1" id='select' />
  <!-- 总费用展示区域 -->
  <div id="totalFee" style="margin-top: 20px; font-size: 16px;"></div>
  <script>
    var courseData = ['Math', 'English', 'History', 'Geography', 'Art'];
    // 维护选中项的顺序，用于判断免费资格
    let selectedOrder = [];

    // 初始化MultiSelect组件
    var listObj = new ej.dropdowns.MultiSelect({
      dataSource: courseData,
      popupHeight: '200px',
      popupWidth: '250px',
      placeholder: "选择课程",
      // 自定义下拉选项模板，显示对应费用
      itemTemplate: function(data) {
        const index = selectedOrder.indexOf(data);
        const fee = index >= 3 ? '$200' : '$0';
        return `<span>${data} - ${fee}</span>`;
      },
      // 选中状态变化时触发
      change: function(e) {
        // 处理新增的选中项，加入顺序数组
        e.addedItems.forEach(item => {
          if (!selectedOrder.includes(item)) {
            selectedOrder.push(item);
          }
        });
        // 处理取消选中的项，从顺序数组移除
        e.removedItems.forEach(item => {
          const idx = selectedOrder.indexOf(item);
          if (idx > -1) {
            selectedOrder.splice(idx, 1);
          }
        });
        // 计算总费用
        const total = Math.max(0, selectedOrder.length - 3) * 200;
        // 更新总费用展示
        document.getElementById('totalFee').innerText = `当前总费用：$${total}`;
        // 刷新下拉列表，更新每个选项的费用显示
        listObj.refresh();
      }
    });
    listObj.appendTo('#select');
  </script>
</body>

</html>

关键逻辑说明 #

• 用selectedOrder数组记录用户选中课程的先后顺序，用户取消选中某个课程时会自动从数组中删除，后续选中的课程会自动递补免费名额
• 自定义下拉选项的展示模板，会根据课程在selectedOrder数组中的位置自动显示是0美元还是200美元
• 总费用实时计算规则：选中课程数量≤3时总费用为0，每超出1个总费用增加200美元
• 完全保留你原有组件的样式风格，不需要额外调整现有表单的其他适配代码

内容的提问来源于stack exchange，提问作者mmoz