仅从一个项目中选择选项，jquery更改每个项目

Question

所以我试图在我的产品列表中构建一个具有不同变体的快速产品。该产品有一组avaialble选项，使用jQuery从select选项中收集，传递到输入字段然后提交到购物车。产品通过循环列出。当我在单个产品页面上时，它工作正常，因为所有选项值都是必需的。

但是，在产品列表中，它会从所有产品中获取选项并将其传递给所有提交字段。如何确定jquery函数的范围，以便一次只处理一个产品

在下面的示例中，我希望该字段仅包含与产品相关的选项选项中的值。两种产品选择都没有评估价值。

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".variant-selected")
    .change(function() {
      var str = "";
      $("select option:selected").each(function() {
        str += $(this).val() + ".";
      });

      $("input[name='variant']").val(str.slice(0, -1));
    })
    .trigger("change");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prod1">
  <h2>
    Shirt
  </h2>
  <select class="variant-selected" name="select1">
            <option value="1" selected>Red</option>
            <option value="2">Blue</option>
            <option value="3">Green</option>
        </select>
  <select class="variant-selected" name="select2">
            <option value="A" selected>Large</option>
            <option value="B">Medium</option>
            <option value="C">Small</option>
        </select>

  <form class="addtocart">
    <input type="text" value="" name="variant">
  </form>

</div>
<div id="prod2">
  <h2>Jeans
  </h2>
  <select class="variant-selected" name="select1">
            <option value="4" selected>Orange</option>
            <option value="5">Teal</option>
            <option value="6">Forest</option>
        </select>

  <select class="variant-selected" name="select2">
        <option value="D" selected>Large</option>
        <option value="E">Medium</option>
        <option value="F">Small</option>
    </select>

  <form class="addtocart">
    <input type="text" value="" name="variant">
  </form>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这里有

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="prod1">
  <h2>
    Shirt
  </h2>
  <select class="variant-selected" name="select1">
            <option value="1" selected>Red</option>
            <option value="2">Blue</option>
            <option value="3">Green</option>
        </select>
  <select class="variant-selected" name="select2">
            <option value="A" selected>Large</option>
            <option value="B">Medium</option>
            <option value="C">Small</option>
        </select>

  <form class="addtocart">
    <input type="text" value="" name="variant">
  </form>

</div>
<div id="prod2">
  <h2>Jeans
  </h2>
  <select class="variant-selected" name="select1">
            <option value="4" selected>Orange</option>
            <option value="5">Teal</option>
            <option value="6">Forest</option>
        </select>

  <select class="variant-selected" name="select2">
        <option value="D" selected>Large</option>
        <option value="E">Medium</option>
        <option value="F">Small</option>
    </select>

  <form class="addtocart">
    <input type="text" value="" name="variant">
  </form>

</div>

＆＃13;

const T& el

＆＃13;

＆＃13;

＆＃13;