How can I get the data-src of a selected option tag using jquery

Question

I am trying to get the data-src attribute of the selected option tag using jquery.

My html markup is like this:

<div id="productinfo">
   <div>
      <p class="price">
         <del data-was="VAN">
         <span class="amount">€200,-</span>
         </del>
         <ins data-now="VOOR">
         <span class="amount">€80,-</span>
         </ins>
      </p>
   </div>
   <p><b>Levertijd:</b> 5 werkdagen mits op voorraad</p>
   <!-- Description -->
   <div>
      <p class="desc kw-details-desc">
         Deze badmeubelen hebben iets speciaals voor elke badkamer
      </p>
   </div>
   <!--/ Description -->
   <!-- Cart -->
   <form class="cart" method="post" action="includes/shoppingcart.php">
      <!-- Single variations wrapper -->
      <div class="single_variation_wrap">
         <!-- Button variations -->
         <div class="variations_button">
            <div class="quantity">
               <input type="hidden" class="form-control-artikelid" name="artikelid" value="63">
               <input type="hidden" class="form-control-product" name="product" value="Badmeubel trend dynasty met ronde kom 60 century oak">
               <input type="hidden" class="form-control-price" name="price" value="80">
               <input type="hidden" class="form-control-picture" name="picture" value="cms/images/productgallerijen/badmeubel-trend-dynasty-met-ronde-kom-60-century-oak/badmeubel-trend-dynasty-met-ronde-kom-60-century-o.jpg">
               <input type="hidden" class="form-control-picture" name="alias" value="badmeubel-trend-dynasty-met-ronde-kom-60-century-oak">
               <input type="hidden" class="form-control-picture" name="catalias" value="trendline-60cm">
               <input type="number" class="input-text qty text" value="1" placeholder="1" step="1" name="quantity" title="Qty" size="4" min="1" required="">
            </div>
            <select id="productoptiekeuze" class="productchoice" required="">
               <option value="">Maak uw keuze</option>
               <option data-src="45.00">€ 45,00&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp; Formaat: 60 cm&nbsp;&nbsp; Kleur: century oak&nbsp;&nbsp; Materiaal: kunststof&nbsp;&nbsp; </option>
               <option data-src="45.00">€ 45,00&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp; Formaat: 60 cm&nbsp;&nbsp; Kleur: century oak&nbsp;&nbsp; Materiaal: kunststof&nbsp;&nbsp; </option>
               <option data-src="55.00">€ 55,00&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp; Formaat: 80 cm&nbsp;&nbsp; Kleur: dark oak&nbsp;&nbsp; Materiaal: kunststof&nbsp;&nbsp; </option>
               <option data-src="55.00">€ 55,00&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp; Formaat: 80 cm&nbsp;&nbsp; Kleur: grey&nbsp;&nbsp; Materiaal: graniet&nbsp;&nbsp; </option>
               <option data-src="55.00">€ 55,00&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp; Formaat: 80 cm&nbsp;&nbsp; Kleur: grey&nbsp;&nbsp; Materiaal: graniet&nbsp;&nbsp; </option>
               <option data-src="95.00">€ 95,00&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp; Formaat: 120 cm&nbsp;&nbsp; Kleur: century oak&nbsp;&nbsp; Materiaal: eik&nbsp;&nbsp; </option>
               <optgroup label=""></optgroup>
            </select>
            <button type="submit" class="single_add_to_cart_button button alt ">Plaats in winkelwagen</button>
         </div>
         <!--/ Button variations -->
      </div>
      <!--/ Single variations wrapper -->
   </form>
</div>

In the footer I have the following code:

tpj('#productinfo').on('change', '#productoptiekeuze', function() {
  var $aangepasteprijs = tpj(this).attr('data-src');
  console.log($aangepasteprijs);
});

This logs undefined in my console when I select an option. Why is it undefined?

Answer 1

I think inside your function you want something like this:

tpj('#productoptiekeuze').find('option:selected').attr('data-src');

So, altogether:

tpj('#productinfo').on('change', '#productoptiekeuze', function() {
  var $aangepasteprijs = tpj('#productoptiekeuze').find('option:selected').attr('data-src');
  console.log($aangepasteprijs);
});

This is where...

tpj('#productoptiekeuze')

selects your select input

.find('option:selected')

selects the currently selected option within that and

.attr('data-src');

gets the attribute.

Answer 2

The reason is because tpj(this).attr('data-src') get the data attribute of select. And your select don't have data-src attribute. That why it returns undefined . You can pass your data-src as a value of each option for example.

You can use pseudo selector :selected as well to achieve this:

tpj('#productoptiekeuze').on('change', function() {
  var $aangepasteprijs = tpj(this).find('option:selected').data('src');
  console.log($aangepasteprijs);
});

Demo here :