jquery selector array

Question

i am having an add to basket problem.Some products have options like color/size. I draw the select box for color/size and an input for qty.

<select name="productOption[1234][color]">
<select name="productOption[1234][size]">
<input type="text" name="productOption[1234][qty]">

So option is an array that holds the values for each product.In the abov example are the options of product with id=1234.

I tried

var productOptions=$("name^='productOption["+productID+"]'").val();  

expecting to get the array of options for the given productID but its not working. The options are dynamically some products can have extra options

Can anyone help me with the selector so retrieve the array of values for given productID and pass them to serverSide.

Thanks

Answer 1

I think this is what you want assuming you're using jQuery.

<script type="text/javascript">
function getProductDetails( product_id ) {
    var product_details = [];
    jQuery( '[name*="productOption[' + product_id + ']"]' ).each( function() {
        var option = jQuery( this );
        var type = option.attr( 'name' ).match( /productOption\[\d+\]\[(\w+)\]/ );
        product_details[ type[1] ] = option.val();
    } );

    return product_details;
}
</script>

This will return an associated array. So you could do...

var details = getProductDetails( 1234 );
alert( details['qty'] );