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

选择您的select输入

.find('option:selected')

选择当前选择的选项和

.attr('data-src');

获取属性。

Answer 2

原因是因为tpj(this).attr('data-src')获取了select的数据属性。并且您的select没有data-src属性。这就是它返回undefined的原因。例如，您可以将data-src作为每个option的值传递。

您也可以使用伪选择器:selected来实现此目的：

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

演示here：

如何使用jquery获取所选选项标记的data-src

2 个答案: