从 table 中的多个下拉列表中获取相同选项的数量

Question

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

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

Answer 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">

从 table 中的多个下拉列表中获取相同选项的数量

Get the count of the same options from multiple dropdowns in a table

javascript

python

django

datatable

jquery