Question

我正在尝试根据所选选项的属性获取所选选项的数据。问题是，当我使用prev函数时，我的代码总是返回第一个选项，即位置X（1,2，ect）。如何在我的每个循环中获取所选选项的数据名称，例如位置2已选择蓝色，因此我应该能够从位置6检索0：finopt：1或0：finopt：5，其中包含选项Red从具有所选属性的选项的数据名称中选择。

$(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函数前往name并获取.att()属性（.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);
});

从每个选定的选项中选择数据

1 个答案: