CODEWITHSUNDEEP
javascriptjquery
bjkam
bjkam

Reputation: 3

Select options from only one item, jquery change each

So I'm trying to build a quickbuy of products with different variants in my list of products. The product has a set of avaialble options, that are collected from the select option with jQuery, passed to a input field and then submitted to the cart. The products are listed out by a loop. When I'm at the single product page it works fine, since all the option values are required.

But once in the list of products, it gets the options from all the products and passes them to all the submit fields. How can I scope a jquery function to work on only one product at a time

In the example below, I want the field to have only the values from the select options relevant to the product. Not th evalues from both product options.

$(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");
});
<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>

Upvotes: 0

Views: 1962

Answers (1)

LPZadkiel
LPZadkiel

Reputation: 571

here you have

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

      $(this).parent().find("input[name='variant']").val(str.slice(0, -1));
    })
    .trigger("change");
});
<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>

Upvotes: 1

Related Questions