如何使用jQuery计算选定的HTML选择元素

Question

I've created form with adding new form elements after pressing Add new (or whatver) button, followed by: http://phpmysqlmania.blogspot.com/p/dynamic-table-row-inserter.html

For example, I have:

    <div id"row">
    <select id="singleorfamily1" style="width: 180px;" name="singleorfamily" >
    <option value="0">Select Single or Family</option>
    <option value="single">Single</option>
    <option value="family">Family</option>
    </select>
    <select id="selectedplan1" name="selectedplan" style="width: 110px;" >
<option value="0">Select Plan</option>
<option value="plan1">Plan1</option>
    <option value="plan2">Plan2</option>
</select>
    </div>

When I press Add new row, it add's new select element into row div:

    <div id"row">
    <select id="singleorfamily1" style="width: 180px;" name="singleorfamily1" >
    <option value="0">Select Single or Family</option>
    <option value="single">Single</option>
    <option value="family">Family</option>
    </select>
    <select id="selectedplan1" name="selectedplan1" style="width: 110px;" >
<option value="0">Select Plan</option>
<option value="plan1">Plan1</option>
    <option value="plan2">Plan2</option>
</select>       
    <select id="singleorfamily2" style="width: 180px;" name="singleorfamily2" >
    <option value="0">Select Single or Family</option>
    <option value="single">Single</option>
    <option value="family">Family</option>
    </select>
    <select id="selectedplan2" name="selectedplan2" style="width: 110px;" >
<option value="0">Select Plan</option>
<option value="plan1">Plan1</option>
    <option value="plan2">Plan2</option>
</select>
    </div>

What I'm trying to make working (without success) and what I need to achieve - how to count selected Single and selected Family values in such case (select elements are dynamic - they can be 1 or 1000 or more). Singles: X, Families: Y. They should be counted after

jQuery('#singleorfamily'+i).change(function()

is made

I've tried "for" loop, "jQuery each"...but I can get it working just for 1 element, not for second, fifth, hundreths... I think I'm stucked how to correclty make looping... ;-O

Any suggestions how to correctly process any "thing" (calculation, event) withing dynamically created elements?

This what I've tried from suggestions: http://jsfiddle.net/AftpY/15/

But the problem is - volume is not updated, it is updated just when 1 select element is changed, but it does not updates "on fly"... And there You can see that there is also other select element...

Edited: Any ideas? I'm really stucked with this problem -> I can not understand (see Jsfiddle link): *)why count info is not refresed after each singleorfamily1 selection, but just when I changed first occurance of singleorfamily1 (can not see/find the problem in the code); *)how to count results of mixing selection values: how many singles from singleorfamily1 & plan1 from selectedplan1, how many family from selectedplan2 & plan2 from selectedplan2 etc...

TNX!

Answer 1

Use JQuery selector

    jQuery('#row select').on("change",function(){
        var singlecount = (jQuery("#row :selected[value='single']").length);
        var familycount = (jQuery("#row :selected[value='family']").length);
    });

http://jsfiddle.net/QPcjB/13/

Answer 2

This works for me:

$('#row select').change(function () {
    var s = 0,
        f = 0;
    $('#row select').each(function () {
        if ($(this).val() == 'single') s++;
        if ($(this).val() == 'family') f++;
    })
    console.log(s, f)
})

jsFiddle example

Answer 3

Here's a simpler fiddle just showing how you can get the current sums at some point in time instead of a change event. http://jsfiddle.net/Aus2v/

//returns the number of selects with "single" chosen
$('select :selected[value="single"]').length; 

//returns the number of selects with "family" chosen
$('select :selected[value="family"]').length;

Answer 4

You can fire it on different event, but the main point is that you just check for selected option value like

 $('select option:selected').each(function(){
    if ($(this).val() == 'single'){
       i++;
    };
    if ($(this).val() == 'family'){
       k++;
    };
 });

Working Fiddle