从表中的多个下拉列表中获取相同选项的计数答案

【问题标题】：Get the count of the same options from multiple dropdowns in a table从表中的多个下拉列表中获取相同选项的计数
【发布时间】：2021-05-25 13:44:21
【问题描述】：

在此表中，我需要从下拉栏中获取选择了绿色值或红色或黄色的选项的总数，并将其显示在绿色黄色的重新输入框中。

HTML代码：

<td>
  <select class="form-control col-md-6 " type="text" id="Zone" name="Zone">
    {% for z in Zone %}
      <option value="{{ z.ZoneName }}">{{ z.ZoneName }}</option>
    {% endfor %}
  </select>
</td>

脚本代码：

$(document).ready(function () {
    $("#calculatebtn").on('click', function () {
        Calculate();
    });
});

function Calculate() {
    // var green = $("tbody tr:visible td:select:nth-child(5):contains('Green')").length;
    var tasks = $('#myTable tr').length - 1;
    var green = parseInt($("#Green").val() * 20);
    // console.log(green)
    var yellow = parseInt($("#Yellow").val() * 10);
    // console.log(yellow)
    var red = parseInt($("#Red").val() * 5);
    // console.log(red)
    var help = parseInt($("#Help").val() * 10);
    // console.log(help)
    var notdone = parseInt($("#NotDone").val() * 20);
    // console.log(notdone)
    var bonus = $('input:checkbox:checked').length - 4;
    // var bonus=parseInt($("#Bonus").val() * 20);
    // console.log(bonus)
    var result = green + yellow + red;
    // console.log(result)
    var total = (green + yellow + red + bonus) - (help + notdone);
    // console.log(total)
    var warpercent = (result / 100) * tasks;
    document.getElementById("Green").value = green
    document.getElementById("Total").value = total
    document.getElementById("Bonus").value = bonus
    document.getElementById("Score").value = result
    document.getElementById("Total").value = total
    document.getElementById("Game").value = game
}

Database Table

【问题讨论】：

那么您想要客户端（javascript、jquery）还是服务器（php、django）的解决方案？为什么这个标签是datatable？
到目前为止，您有什么尝试自己解决这个问题 (How much research effort is expected of Stack Overflow users?)？
我已经为每个表格显示使用了数据表，所以我只是想知道是否有一个内置术语来获取下拉列表的计数。
刚刚添加脚本代码
我正在寻找客户端的解决方案。

标签： javascript python jquery django datatable

【解决方案1】：

您可以使用.each 循环遍历您的选择框。在此根据值将1 添加到您的变量中，然后使用.val() 在相关框中添加最终结果。

演示代码：

$(document).ready(function() {
  $("#calculatebtn").on('click', function() {
    Calculate();
  });


function Calculate() {
  var green = 0;
  var yellow = 0;
  var red = 0;
  //loop through slect
  $("select[name=Zone]").each(function() {
  //check select value
    if ($(this).val() == "Green") {
      green = green + 1
    } else if ($(this).val() == "Yellow") {
      yellow = yellow + 1
    } else {
      red = red + 1
    }

  })

//add total..
  $("#Green").val(green)
  $("#Red").val(red)
  $("#Yellow").val(yellow)
  $("#Total").val(green + red + yellow)


}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <select class="form-control col-md-6 " type="text" name="Zone">
        <option value="Green">Green</option>
        <option value="Red">Red</option>
        <option value="Yellow">Yellow</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <select class="form-control col-md-6 " type="text" name="Zone">
        <option value="Green">Green</option>
        <option value="Red">Red</option>
        <option value="Yellow">Yellow</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <select class="form-control col-md-6 " type="text" id="Zone" name="Zone">
        <option value="Green">Green</option>
        <option value="Red">Red</option>
        <option value="Yellow">Yellow</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <select class="form-control col-md-6 " type="text" id="Zone" name="Zone">
        <option value="Green">Green</option>
        <option value="Red">Red</option>
        <option value="Yellow">Yellow</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <select class="form-control col-md-6 " type="text" name="Zone">
        <option value="Green">Green</option>
        <option value="Red">Red</option>
        <option value="Yellow">Yellow</option>
      </select>
    </td>
  </tr>
</table>

<button id="calculatebtn">Calculate</button>
<br>Green
<input type="text" id="Green"><br> Yellow
<input type="text" id="Yellow"> <br> Red : <input type="text" id="Red"> <br> Total :<input type="text" id="Total">

【讨论】：