getting values of multiple select boxes using jquery each

Question

Hi i have a shop where you need to specify options before u can add something to a cart. I used to use radio buttons to add those specs but the list was getting to long so i rebuild it to select boxes. The problem is that now sometimes the specs are added and sometimes it dont...

The select boxes are populated in a loop. and is done by smarty and looks like this

        {**************SELECT BOX*******************}
        {if $menuaddonslist[add].mainaddonsname neq '' && $menuaddonslist[add].mainaddonsnamecnt >= 1}
            {$objSearchDetails->menuSubAddonsList($menuaddonslist[add].addonparentid,$menuaddonslist[add].menuaddons_menuid)}
                <div class="single">
                <span class="addonTitle">{$menuaddonslist[add].mainaddonsname|stripslashes}</span>
                <select class="popNameInput" id="selectBox_{$menuaddonslist[add].addonparentid}" name="addonstype_{$menuaddonslist[add].mainaddonsname}" style="border: 1px solid #dedede;margin-bottom:15px;width:230px;">
                {section name="subadd" loop=$menuSubaddonslist}
                    {if $menuSubaddonslist[subadd].subaddonsname neq ''}
                        {if $menuaddonslist[add].mainaddonsnamecnt eq '1'}
                        <option value="{$menuSubaddonslist[subadd].menuaddons_id}">
                          {$menuSubaddonslist[subadd].subaddonsname|ucfirst|stripslashes}
                            {if $menuSubaddonslist[subadd].menuaddons_priceoption eq 'Paid'} 
                            (+&nbsp;&#8364;{$menuSubaddonslist[subadd].menuaddons_price} )
                            {/if}
                        </option>
                        {/if}
                     {/if}
                {/section}
                </select>
                <input type="hidden" name="singleopt" class="singleopt" id="singleopt" value="single">
                </div>
                <div style="clear:both"></div>

and this is tje jquery

            if(singleoption == 'single'){
                var AddonstypeSingle=[];
                $("div.single :option").each( function() {
                    AddonstypeSingle.push( this.value );
                });
                //alert(AddonstypeSingle);
            }

So if there are 10 select boxes it shows 10 times a div with class single. and then I loop that and take the :option var but sometimes it just dont work. before it was with radio options and the jquery was like this:

            if(singleoption == 'single'){
                var AddonstypeSingle=[];
                $("div.single input[type=radio]:checked").each( function() {
                    AddonstypeSingle.push( this.value );
                });
                //alert(AddonstypeSingle);
            }

That worked fine. I can give each box a uniqe ID also, but the problem is that this list of select boxes is created automaticly and i can not hard code this in jquery.

Is my selector wrong?

Answer 1

The selector to get all the options is:

$("div.single option").each( function (){} );

The selector to get all the selected options is:

$("div.single option:selected").each( function (){} );

Answer 2

You could try

if(singleoption == 'single'){
    var AddonstypeSingle=[];
    $("div.single select").each( function() {
        AddonstypeSingle.push( this.value );
    });
}

Answer 3

This will do the trick ;)

var AddonstypeSingle=[];
$("div.single option:selected").each(function(){
    AddonstypeSingle.push($(this).val());
});