Javascript 如何使用jquery获取所选选项标记的数据src

我正在尝试使用jquery获取所选选项标记的

数据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('#productoptiekeuze').find('option:selected').attr('data-src');

---

当我选择一个选项时，它会在我的控制台中记录

未定义的

。为什么它没有定义？

我认为在你的函数中你需要这样的东西：

<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('#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');

获取属性。
我认为在函数中您需要这样的内容：

<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('#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');

获取属性。
原因是
tpj（this）.attr（'data-src'）
获取select的数据属性。并且您的
选择
没有
数据src
属性。这就是它返回未定义的
的原因。例如，您可以将数据src作为每个
选项的值传递

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

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

演示：
原因是
tpj（this）.attr（'data-src'）
获取select的数据属性。并且您的
选择
没有
数据src
属性。这就是它返回未定义的
的原因。例如，您可以将数据src作为每个
选项的值传递

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

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

演示：