尝试从网站上的列表中添加多个选择

Question

$(function() {
  var fields = $('#form1 :input').change(calculate)
  $("#form1 option").text(function(i, t) {
    if (this.value !== "0")
      return t + " - " + this.value
  })

  function calculate() {
    var price = 0;
    fields.each(function() {
      price += +$(this).val();
    })
    $('#price').html(price.toFixed(0));
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" action="">
  <p>
    <select name="DMA1" multiple id="DMA1">
                 <option value="1">1</option>
                 <option value="2">2</option>
                 <option value="3">3</option>
                 <option value="4">4</option>
              </select>
  </p>
  </p>
</form>
Total: <u id="price"></u>
<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>

我找到了一个我可以开始工作的示例，我可以让多个下拉列表将它们的值加在一起。 page/code 工作正常。

我一直无法调整它，所以你可以 shift-select（或命令 -select on mac）并让它合计总计字段中的值页面底部。

我当前的代码如下，如有任何帮助，我们将不胜感激。我已经在网上搜索了一段时间，但似乎找不到我要找的东西。我能找到的最接近的是有多个下拉菜单（如上所述）

细分如下：

Javascript

      <script type='text/javascript' src='http://code.jquery.com/jquery-git.js'></script>
  <script type='text/javascript'>
     $(function () {
         var fields = $('#form1 :input').change(calculate)
         $("#form1 option").text(function(i,t){
             if (this.value!=="0") 
                 return t + " - " + this.value
         })

         function calculate() {
             var price = 0;
             fields.each(function () {
                 price += +$(this).val();
             })
             $('#price').html(price.toFixed(0));
         }
     })

  </script>

正文

   <body>
        <form id="form1" method="post" action="">
           <p>
              <select name="DMA1" multiple id="DMA1">
                 <option value="1">1</option>
                 <option value="2">2</option>
                 <option value="3">3</option>
                 <option value="4">4</option>
              </select>
           </p>
           </p>  
        </form>
        Total: <u id="price"></u>
        <p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>
     </body>
  </html>

Answer 1

您试图根据 <select> 元素进行计算。 fields 变量设置不正确。设置为附件中的选项。

$(function() {
  var fields = $('option');
  $('#form1 :input').change(calculate)
  $("#form1 option").text(function(i, t) {
    if (this.value !== "0")
      return t + " - " + this.value
  })

  function calculate() {
    var price = 0;
    fields.each(function() {
      if (this.selected) {
        price += +$(this).val();
      }
    })
    $('#price').html(price.toFixed(0));
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" action="">
  <p>
    <select name="DMA1" multiple id="DMA1">
                 <option value="1">1</option>
                 <option value="2">2</option>
                 <option value="3">3</option>
                 <option value="4">4</option>
              </select>
  </p>
  </p>
</form>
Total: <u id="price"></u>
<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>

尝试从网站上的列表中添加多个选择

Trying to add multiple selections together from a list on a website

html

javascript

math

web

calculation