javascript - 如何使用 jquery 获取所选选项标签的数据源

Question

我正在尝试使用 jquery 获取所选选项标签的 data-src 属性。

我的 html 标记是这样的:

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

在页脚中我有以下代码:

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

当我选择一个选项时，这会在我的控制台中记录 undefined。为什么它是未定义的？

Answer 1

我想在你的函数中你想要这样的东西:

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

所以，总的来说:

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

这是...

tpj('#productoptiekeuze')

选择您的选择输入

.find('option:selected')

在其中选择当前选择的选项并

.attr('data-src');

获取属性。