前三件免费？答案

【问题标题】：First three items free?前三件免费？
【发布时间】：2021-08-22 20:34:02
【问题描述】：

我非常对编码和学习很陌生。

我当前的难题：尝试创建一个多选列表，其中选择的前三个选项（例如，考虑课程科目）将是免费的，但其上的每个额外选择都将收取 200 美元的费用，并且会显示总数.示例：

数学 - $0
英语 - $0
历史 - $0
地理 - 200 美元
艺术 - 200 美元

...直到列表的末尾。用户可以选择的选项数量没有限制，也没有与特定选项相关联；无论选择哪个选项，前三个都是免费的。

我一直在玩弄下面的 W3 列表代码，因为它符合表单其余部分的风格：

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

<head>
  <h2> Select the Desired Activites </h2>
  <!-- Essential JS 2 MultiSelect's dependent material theme -->
  <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 all script -->
  <!-- <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> -->

  <!-- Essential JS 2 MultiSelect's dependent scripts -->
  <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>
  <!-- Add the HTML <input> element  -->
  <input type="text" tabindex="1" id='select' />
  <script>
    var sportsData = ['Math', 'English', 'History', 'Geography', 'Art'];
    // initialize MultiSelect component
    var listObj = new ej.dropdowns.MultiSelect({
      dataSource: sportsData,
      popupHeight: '200px',
      //set width to popup list
      popupWidth: '250px',
      // set placeholder to MultiSelect input element
      placeholder: "Activity"
    });
    listObj.appendTo('#select');
  </script>
</body>

</html>

【问题讨论】：

创建一个变量freeCoursesLeft。一旦达到 0，就可以开始充电了。
获取一个数组并附加到它。一旦长度为3，然后开始充电。
添加一个事件处理程序，每次用户添加或删除项目时触发。事件处理程序计算所选项目的数量。如果总数 > 3，则从总数中减去 3。将该数字乘以 200 得到您的美元金额。

标签： javascript html list

【解决方案1】：

您可以从tagging 和removed 事件中计算listObj.value 中有多少项目：

#priceList
{
  white-space: pre;
}

#priceList
{
  display: inline-flex;
}

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

<head>
  <!-- Essential JS 2 MultiSelect's dependent material theme -->
  <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 all script -->
  <!-- <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> -->

  <!-- Essential JS 2 MultiSelect's dependent scripts -->
  <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>
  <h2> Select the Desired Activites </h2>
  <!-- Add the HTML <input> element  -->
  <input type="text" tabindex="1" id='select' />
  <div class="priceListBox">Price per item: <span id="priceList"></span></div>
  <div>Price total: <span id="price">0</span></div>
  <script>
    var sportsData = ['Math', 'English', 'History', 'Geography', 'Art'];
    // initialize MultiSelect component
    var listObj = new ej.dropdowns.MultiSelect({
      dataSource: sportsData,
      popupHeight: '200px',
      //set width to popup list
      popupWidth: '250px',
      // set placeholder to MultiSelect input element
      placeholder: "Activity",
      

      //event listeners
      tagging: getPrice, //item added
      removed: getPrice  //item removed
    });
    listObj.appendTo('#select');

    //event handler
    function getPrice()
    {
      let price = 0;
      if (listObj.value.length > 3)
        price = (listObj.value.length - 3) * 200; 

      //display total price
      document.getElementById("price").textContent = price;
      
      let priceList = [];
      for(let i = 0; i < listObj.value.length; i++)
      {
        priceList.push(listObj.value[i] + " = " + (i > 2 ? 200 : 0));
      }
      //display prices for each item
      document.getElementById("priceList").textContent = priceList.join("\n");
    }
  </script>
</body>

</html>

【讨论】：

只是出于好奇：您是如何知道“标记”和“删除”的？
来自 API 页面 ej2.syncfusion.com/javascript/documentation/api/multi-select/…。由于它们没有每次输入字段更改时都会触发的“输入”事件（change 事件仅在焦点更改时触发......愚蠢），下一个逻辑步骤将是跟踪何时添加和删除标签跨度>

【解决方案2】：

我不知道这是否是你想要的，但你可以在标记事件上做一个事件监听器，然后用选定的标记长度进行计算。

var sportsData = ['Math', 'English', 'History', 'Geography', 'Art'];
// initialize MultiSelect component
var listObj = new ej.dropdowns.MultiSelect({
    dataSource: sportsData,
    popupHeight: '200px',
    //set width to popup list
    popupWidth: '250px',
    // set placeholder to MultiSelect input element
    placeholder: "Activity"});

// Listen on tagging event and execute the function to calculate.
listObj.tagging = function () {
    var selectedTags = listObj.value;

    if (selectedTags.length > 3) {
        var total = (selectedTags.length - 3) * 200;

        alert('$' + total);
    }
}

listObj.appendTo('#select');

我希望这可以帮助您顺利上路。

【讨论】：

【解决方案3】：

从documentation，您可以阅读以下有关下拉列表的内容，它是listObj：

改变
活动
Triggers when an item in a popup is selected or when the model value is changed by user.使用 change 事件配置级联 DropDownList

他们还提供了一个例子。所以我将它添加到您的代码中，通过向您的listObj 添加一个“更改”属性，然后通过valueChanged() 打印成本。

注意：您需要选择一些活动，然后单击下拉菜单以外的其他位置以查看价格。

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

<head>
  <h2> Select the Desired Activites </h2>
  <!-- Essential JS 2 MultiSelect's dependent material theme -->
  <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 all script -->
  <!-- <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> -->

  <!-- Essential JS 2 MultiSelect's dependent scripts -->
  <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>
  <!-- Add the HTML <input> element  -->
  <input type="text" tabindex="1" id='select' />
  <script>
    var sportsData = ['Math', 'English', 'History', 'Geography', 'Art'];
    // initialize MultiSelect component
    var listObj = new ej.dropdowns.MultiSelect({
      dataSource: sportsData,
      popupHeight: '200px',
      //set width to popup list
      popupWidth: '250px',
      // set placeholder to MultiSelect input element
      placeholder: "Activity",
      // ADDED
      change: (event) => { valueChanged(event.value) }
    });
    listObj.appendTo('#select');
    
    // ADDED
    function valueChanged(valueArr) {
      let price = 0,
          maxFreeActivities = 3,
          costPerActivity = 200,
          numberOfSelectedActivities = valueArr.length;
      
      if (numberOfSelectedActivities > maxFreeActivities) {
        price = (numberOfSelectedActivities - maxFreeActivities) * costPerActivity;
      }
      
      console.log('price:', price);
    }
  </script>
</body>

</html>

【讨论】：