從多個下拉菜單中選擇獨特的選擇

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的下拉列表。計算有多少人選擇了「是」，「否」和「不適用」/「的最佳方法是什麼？由於

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

在共同你可以使用change事件：如果你想指望每種類型的選擇

var results = {}; 

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

DEMO

：

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

試試這個 - 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 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++; } 

    }); 
}); 

希望這有助於原因。