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

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 的不同下拉菜单。计算有多少人选择了 Yes、No 和 N/A/ 的最佳方法是什么？谢谢

Answer 1

通常你可以使用change事件：

var results = {};

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

DEMO

如果你想计算每种类型的 select:

$('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;
});

DEMO

在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

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

你可以这样简单

$('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 4

我的方法是：

    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 5

可能有更简洁的方法来执行此操作，但这将完成工作（假设点击按钮触发事件）：

$("#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++; }

    });
});

希望这对事业有所帮助。

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

Count Unique Selection from Multiple Dropdown

html

javascript

jquery

counting

drop-down-menu

我的方法是：