从每个选项和所选选项中的select获取数据

Question

如果该选项具有属性select，则尝试获取所选选项的数据。问题是，当我使用prev函数时，我的代码总是返回第一个选项，即位置X(1，2，等等)。如何在我的每个循环中获得所选选项的数据名，例如，位置2已经选择了Blue，所以我应该能够从具有所选属性的选项的数据名称中检索0:finopt:1或0:finopt:5。

​

$(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>

​

Answer 1

您必须进入select并使用.att()函数获取它的name属性(.data('whatever')是为data-whatever="value"属性设计的)。

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

但是，如果您只需要选择具有selected属性的选项，就可以在一个选择中完成它(因此不需要循环遍历所有option元素).

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