自定义Select与JavaScript自动计算价格脚本冲突求助

问题现象 #

整合自动计算价格和自定义Select功能后，保留custom-select类时，选择数量无法触发价格计算；移除该类后计算功能恢复正常。

冲突原因 #

自定义Select的实现逻辑中，用户点击自定义选项时，仅更新了原生<select>的selectedIndex，但没有触发原生的change事件。而价格计算的calculateAmount函数绑定在原生select的onchange事件上，因此无法被触发。

修复方案 #

在自定义选项的点击事件处理函数中，更新完原生select的选中状态后，手动触发其change事件。

修改点 #

在自定义选项的点击回调里，找到更新selectedIndex的代码后，添加一行：

s.dispatchEvent(new Event('change'));

完整修复代码 #

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Bootstrap demo</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
      <style>
      /*the container must be positioned relative:*/
      .custom-select {
      position: relative;
      font-family: Arial;
      }
      .custom-select select {
      display: none; /*hide original SELECT element:*/
      }
      .select-selected {
      background-color: DodgerBlue;
      }
      /*style the arrow inside the select element:*/
      .select-selected:after {
      position: absolute;
      content: "";
      top: 14px;
      right: 10px;
      width: 0;
      height: 0;
      border: 6px solid transparent;
      border-color: #fff transparent transparent transparent;
      }
      /*point the arrow upwards when the select box is open (active):*/
      .select-selected.select-arrow-active:after {
      border-color: transparent transparent #fff transparent;
      top: 7px;
      }
      /*style the items (options), including the selected item:*/
      .select-items div,.select-selected {
      color: #ffffff;
      padding: 8px 16px;
      border: 1px solid transparent;
      border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
      cursor: pointer;
      user-select: none;
      }
      /*style items (options):*/
      .select-items {
      position: absolute;
      background-color: DodgerBlue;
      top: 100%;
      left: 0;
      right: 0;
      z-index: 99;
      }
      /*hide the items when the select box is closed:*/
      .select-hide {
      display: none;
      }
      .select-items div:hover, .same-as-selected {
      background-color: rgba(0, 0, 0, 0.1);
      }
      </style>
   </head>     

   <body>
      <div class="container">
         <div class="row">
            <div class="col">
               <h3>How to Auto Calculate Price in Javascript</h3>
            </div>
         </div>
         <div class="row">
            <div class="col-6">
               <input type="hidden" name="mode" value="PinRequest" />
               <label class="w3-text-green"><b>Number Of Pin</b></label>
               <div class="custom-select" style="width:200px;">
                  <select name="tot_pin_requested" style="width:200px;" onchange="calculateAmount(this.value)" required>
                     <option value="" disabled selected>Choose your option</option>
                     <option value="1">1</option>
                     <option value="2">2</option>
                     <option value="3">3</option>
                     <option value="4">4</option>
                     <option value="5">5</option>
                     <option value="6">6</option>
                     <option value="7">7</option>
                     <option value="8">8</option>
                     <option value="9">9</option>
                     <option value="10">10</option>
                  </select>
               </div>
            </div>
            <div class="col-6">
               <label><b>Total Amount</b></label><br>
               <input class="w3-input w3-border" name="tot_amount" id="tot_amount" type="text" readonly>
            </div>
         </div>
      </div>
  
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

      <script>
         var x, i, j, l, ll, selElmnt, a, b, c;
         /*look for any elements with the class "custom-select":*/
         x = document.getElementsByClassName("custom-select");
         l = x.length;
         for (i = 0; i < l; i++) {
         selElmnt = x[i].getElementsByTagName("select")[0];
         ll = selElmnt.length;
         /*for each element, create a new DIV that will act as the selected item:*/
         a = document.createElement("DIV");
         a.setAttribute("class", "select-selected");
         a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
         x[i].appendChild(a);
         /*for each element, create a new DIV that will contain the option list:*/
         b = document.createElement("DIV");
         b.setAttribute("class", "select-items select-hide");
         for (j = 1; j < ll; j++) {
            /*for each option in the original select element,
            create a new DIV that will act as an option item:*/
            c = document.createElement("DIV");
            c.innerHTML = selElmnt.options[j].innerHTML;
            c.addEventListener("click", function(e) {
               /*when an item is clicked, update the original select box,
               and the selected item:*/
               var y, i, k, s, h, sl, yl;
               s = this.parentNode.parentNode.getElementsByTagName("select")[0];
               sl = s.length;
               h = this.parentNode.previousSibling;
               for (i = 0; i < sl; i++) {
                  if (s.options[i].innerHTML == this.innerHTML) {
                     s.selectedIndex = i;
                     // 新增：触发原生select的change事件
                     s.dispatchEvent(new Event('change'));
                     h.innerHTML = this.innerHTML;
                     y = this.parentNode.getElementsByClassName("same-as-selected");
                     yl = y.length;
                     for (k = 0; k < yl; k++) {
                     y[k].removeAttribute("class");
                     }
                     this.setAttribute("class", "same-as-selected");
                     break;
                  }
               }
               h.click();
            });
            b.appendChild(c);
         }
         x[i].appendChild(b);
         a.addEventListener("click", function(e) {
               /*when the select box is clicked, close any other select boxes,
               and open/close the current select box:*/
               e.stopPropagation();
               closeAllSelect(this);
               this.nextSibling.classList.toggle("select-hide");
               this.classList.toggle("select-arrow-active");
            });
         }
         function closeAllSelect(elmnt) {
         /*a function that will close all select boxes in the document,
         except the current select box:*/
         var x, y, i, xl, yl, arrNo = [];
         x = document.getElementsByClassName("select-items");
         y = document.getElementsByClassName("select-selected");
         xl = x.length;
         yl = y.length;
         for (i = 0; i < yl; i++) {
            if (elmnt == y[i]) {
               arrNo.push(i)
            } else {
               y[i].classList.remove("select-arrow-active");
            }
         }
         for (i = 0; i < xl; i++) {
            if (arrNo.indexOf(i)) {
               x[i].classList.add("select-hide");
            }
         }
         }
         /*if the user clicks anywhere outside the select box,
         then close all select boxes:*/
         document.addEventListener("click", closeAllSelect);
      </script>
      
      <script>
         function calculateAmount(val) {
            var tot_price = val * 100;
            /*display the result*/
            var divobj = document.getElementById('tot_amount');
            divobj.value = tot_price;
         }
      </script>
   </body>
</html>

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