Suzed
Suzed

Reputation: 487

Getting data from select within each and selected option

I am trying to get the data of the selected option based on if it has the attribute select. The problem is that when I use the prev function my code always returns the first option which is Position X(1, 2, ect). How can I get the data name of the selected option within my each loop for for example position 2 has Blue selected so I should be able to retrieve 0:finopt:1 or 0:finopt:5 from the position 6 which has the option Red selected from the data name of the option that has the selected attribute.

$(document).ready(function(){
  $('.cart-product-options .cart option').each(function(sk,sv){
      if($(this).attr('selected')){
        console.log($(this).prev().prev().data('name'));
        console.log(sv);
      }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cart-product">
<tbody>
<div class="cart-product-options">
<tr><td class="opt_cart">
<select class="cart" name="0:finopt:0" size="1">
<option value="Position 1">Position 1</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Amber">Amber</option> 
<option value="Red/Blue">Red/Blue</option>
<option value="Red/Amber">Red/Amber</option>
<option value="Red/White">Red/White</option>
<option value="Blue/Amber">Blue/Amber</option>
<option value="Blue/White">Blue/White</option>
<option value="Amber/White">Amber/White</option>
</select>
</td>
</tr><tr><td class="opt_cart">
<select class="cart" name="0:finopt:1" size="1">
<option value="Position 2">Position 2</option>
<option value="Red">Red</option>
<option value="Blue" selected>Blue</option>
<option value="Amber">Amber</option>
<option value="White">White</option>
<option value="Red/Blue">Red/Blue</option>
<option value="Red/Amber">Red/Amber</option>
<option value="Red/White">Red/White</option>
<option value="Blue/Amber">Blue/Amber</option>
<option value="Blue/White">Blue/White</option>
<option value="Amber/White">Amber/White</option>
</select>
</td>
</tr><tr><td class="opt_cart">
<select class="cart" name="0:finopt:2" size="1">
<option value="Position 3">Position 3</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Amber">Amber</option>
<option value="White">White</option>
<option value="Red/Blue">Red/Blue</option>
<option value="Red/Amber">Red/Amber</option>
<option value="Red/White">Red/White</option>
<option value="Blue/Amber">Blue/Amber</option>
<option value="Blue/White">Blue/White</option>
<option value="Amber/White">Amber/White</option>
</select>
</td>
</tr><tr><td class="opt_cart">
<select class="cart" name="0:finopt:3" size="1">
<option value="Position 4">Position 4</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Amber">Amber</option>
<option value="White">White</option>
<option value="Red/Blue">Red/Blue</option>
<option value="Red/Amber">Red/Amber</option>
<option value="Red/White">Red/White</option>
<option value="Blue/Amber">Blue/Amber</option>
<option value="Blue/White">Blue/White</option>
<option value="Amber/White">Amber/White</option>
</select>
</td>
</tr><tr><td class="opt_cart">
<select class="cart" name="0:finopt:4" size="1">
<option value="Position 5">Position 5</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Amber">Amber</option>
<option value="White">White</option>
<option value="Red/Blue">Red/Blue</option>
<option value="Red/Amber">Red/Amber</option>
<option value="Red/White">Red/White</option>
<option value="Blue/Amber">Blue/Amber</option>
<option value="Blue/White">Blue/White</option>
<option value="Amber/White">Amber/White</option>
<option value="Takedowns">Takedowns</option>
</select>
</td>
</tr><tr><td class="opt_cart">
<select class="cart" name="0:finopt:5" size="1">
<option value="Position 6">Position 6</option>
<option value="Red" selected>Red</option>
<option value="Blue">Blue</option>
<option value="Amber">Amber</option>
<option value="White">White</option>
<option value="Red/Blue">Red/Blue</option>
<option value="Red/Amber">Red/Amber</option>
<option value="Red/White">Red/White</option>
<option value="Blue/Amber">Blue/Amber</option>
<option value="Blue/White">Blue/White</option>
<option value="Amber/White">Amber/White</option>
<option value="Takedowns">Takedowns</option>
</select>
</td>
</tr>
</div>

Upvotes: 0

Views: 51

Answers (1)

A. Iglesias
A. Iglesias

Reputation: 2675

You have to go up to the select and get it's name attribute using .att() function (.data('whatever') is designed for data-whatever="value" attributes)...

$('.cart-product-options .cart option').each(function(sk,sv) {
    if($(this).attr('selected')){
        console.log($(this).closest('select').attr('name'));
        console.log(sv);
    }
});

But if you just need to select the options that has selected attribute, you can do it in one select (so you won't need to loop through all option elements)...

$('div.cart-product-options select.cart option[selected]').each(function(sk,sv) {
    console.log($(this).closest('select').attr('name'));
    console.log(sv);
});

Upvotes: 1

Related Questions