How to count selected html select elements using jQuery

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!

Add class to your row whenever the selects are changed and the using jquery get all elements of the selected class and use count — Banana
– Banana, Commented Apr 7, 2014 at 19:22

xd6_ · Accepted Answer · 2014-04-07 19:27:49Z

2

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/

answered Apr 7, 2014 at 19:27

xd6_

4834 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

j08691 · Accepted Answer · 2014-04-07 19:27:28Z

1

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

answered Apr 7, 2014 at 19:27

j08691

208k33 gold badges269 silver badges281 bronze badges

1 Comment

Mole_LR Over a year ago

OK! This could be the partly solution... But what to do if there are more select elements with different options? It is, as this was just an example, I put it just 1 select element type. But in reality I have another select element (with other options). So, how then I can use just 1 select element type using name/id? I need them to be counted seperately as count each family type, count each plan type, count singles&plan1, single&plan2, family&plan1, family&plan2 etc...

Jack · Accepted Answer · 2014-04-07 19:37:05Z

1

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;

answered Apr 7, 2014 at 19:37

Jack

8,9413 gold badges23 silver badges27 bronze badges

Comments

Y.Puzyrenko · Accepted Answer · 2014-04-07 19:38:43Z

0

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

answered Apr 7, 2014 at 19:38

Y.Puzyrenko

2,1951 gold badge16 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to count selected html select elements using jQuery

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related