Getting Values from Multiple Dropdown Menus jQuery

Question

I would like to pass values from multiple dropdown menus to a modal. The dropdowns are created in a foreach loop, and the number of dropdowns varies depending on how many products are on a specific order.

Here is one of the dropdown menus:

<select name="status_update_7873" class="confirm-options">
     <option value="2" selected="selected"></option>
     <option value="3">Shipped</option>
     <option value="4">Out of Stock</option>
     <option value="0">Cancel Item</option>
</select>

The user can select an option for this product, and all other products on an order. To make sure that product statuses are correct and the user submits all relevant updates in one click/post we use a modal that confirms the user's choices. The modal shows the product names and the status update option selected from the dropdowns on the page.

I am not sure how to get the status updates to show for each product. The below passes the value of the first dropdown only. I would like the selected option from each dropdown to show for the related product.

$('.status_update_btn').click(function(){

    $('#status_update').modal('show');

    $('.confirm-options').each(function(){
        $('.modal-body .status').text($(".confirm-options").val());
    });
});

Here is a jsfiddle (modal replaced by alert): http://jsfiddle.net/9m3xs/5/

Thank you

I was working on one but couldn't get it set up as I wanted to so I didn't post, however here's what I've got: jsfiddle.net/9m3xs/1 — Dan
– Dan, Commented Dec 27, 2013 at 16:45
Your fiddle didn't set the jQuery library to be loaded (options in the left sidebar). See jsfiddle.net/Palpatim/9m3xs/2 — Palpatim
– Palpatim, Commented Dec 27, 2013 at 16:46

Palpatim · Accepted Answer · 2013-12-27 16:49:07Z

1

Your each block wasn't constructed properly: http://jsfiddle.net/Palpatim/9m3xs/4/

The basic issue: jQuery each passes its function two arguments: an index of the current item, and the associated DOM (not jQuery) object. When you rework the each function like so, it works as expected:

$('.status_update_btn').click(function () {
    $('.confirm-options').each(function (i, e) {
        alert($(e).val());
    });
});

answered Dec 27, 2013 at 16:49

Palpatim

9,30237 silver badges45 bronze badges

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

Collectives™ on Stack Overflow

Getting Values from Multiple Dropdown Menus jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related