从多个下拉列表中计算唯一选择

Question

我是jQuery的新手，我正在研究调查表格，并且在不同问题上有多个下拉菜单，但它们都具有相同的下拉值。认为我有：

<select name="Forms[AgentIsPitch]" id="Forms_AgentIsPitch">
 <option value="">Choose One</option>
 <option value="Yes">Yes</option>
 <option value="No">No</option>
 <option value="N/A">N/A</option>
</select>   

<select name="Forms[MandatoryOptIsStated]" id="Forms_MandatoryOptIsStated">
 <option value="">Choose One</option>
 <option value="Yes">Yes</option>
 <option value="No">No</option>
 <option value="N/A">N/A</option>
</select>   

和其他具有不同ID的不同下拉列表。什么是计数多少是选择是，否和n/a/的方法是什么？谢谢

Answer 1

您可以这样做简单

$('select').change(function() {
    // get all selects
    var allSelects = $('select');
    // set values count by type
    var yes = 0;
    var no = 0;
    // for each select increase count
    $.each(allSelects, function(i, s) {
        // increase count
        if($(s).val() == 'Yes') { yes++; }
        if($(s).val() == 'No') { no++; }
    });
    // update count values summary
    $('.cnt-yes').text(yes);
    $('.cnt-no').text(no);
});

demo

Answer 2

尝试一下 - https://jsfiddle.net/sergdenisov/h8slxw6y/2/：

var count = {};
count.empty = $('select option:selected[value=""]').length;
count.yes = $('select option:selected[value="Yes"]').length;
count.no = $('select option:selected[value="No"]').length;
count.nA = $('select option:selected[value="N/A"]').length;
console.log(count);

Answer 3

我的做法是：

    var optionsYes = $("option[value$='Yes']:selected");
    var optionsNo = $("option[value$='No']:selected");
    var optionsNA = $("option[value$='N/A']:selected");
    console.log('number of yes selected = ' + optionsYes .length);
    console.log('number of no selected = ' + optionsNo .length);
    console.log('number of N/A selected = ' + optionsNA .length);

检查控制台（或用警报替换）。

使用您的代码，它将是这样的（假设您想检查按钮单击事件）：

<select name="Forms[AgentIsPitch]" id="Forms_AgentIsPitch">
 <option value="">Choose One</option>
 <option value="Yes">Yes</option>
 <option value="No">No</option>
 <option value="N/A">N/A</option>
</select>   

<select name="Forms[MandatoryOptIsStated]" id="Forms_MandatoryOptIsStated">
 <option value="">Choose One</option>
 <option value="Yes">Yes</option>
 <option value="No">No</option>
 <option value="N/A">N/A</option>
</select>  
<button class="btn btn-primary" id="countYes"></button>
<script type="text/javascript">
   $('#countYes').on('click', function(){
    var optionsYes = $("option[value$='Yes']:selected");
    var optionsNo = $("option[value$='No']:selected");
    var optionsNA = $("option[value$='N/A']:selected");
    console.log('number of yes selected = ' + optionsYes .length);
    console.log('number of no selected = ' + optionsNo .length);
    console.log('number of N/A selected = ' + optionsNA .length);
   });
</script>

您可以在另一个事件上检查，我选择一个按钮单击。

Answer 4

可能有一种更清洁的方法可以做到这一点，但这将完成工作（假设有一个按钮点击触发事物）：

$("#theButton").on('click', function() {
    var totalSelect = 0;
    var totalYes = 0;
    var totalNo = 0;
    var totalNA = 0;
    $("select").each(function(){
        totalSelect++;
        if ($(this).val() == "Yes") { totalYes++; } 
        if ($(this).val() == "No") { totalNo++; } 
        if ($(this).val() == "N/A") { totalNA++; }
    });
});

希望这对原因有所帮助。

Answer 5

共同您可以使用change事件：

var results = {};
$('select').on('change', function() {
  var val = $(this).val();
  results[val] = (results[val] || 0) + 1;
});

演示

如果您想计算每种类型的选择：

$('select').on('change', function() {
  var val = $(this).val();
  var name = $(this).attr('name');
    if (!results[name]) {
        results[name] = {};
    }
  results[name][val] = (results[name][val] || 0) + 1;
});

演示

在results中将是这样的：

{
  "Forms[AgentIsPitch]": {
      "Yes": 1,
      "No": 2,
      "N/A": 3
  },
  "Forms[MandatoryOptIsStated]": {
      "No": 5,
      "N/A": 13
  },  
}

upd：用于计数当前选择：

$('select').on('change', function() {
    var results = {};
    $('select').each(function() {
        var val = $(this).val();
        if (val) {
            results[val] = (results[val] || 0) + 1;
        }
    })
    console.log(results);
});

demo