2017-12-17 20 views
0

私はドロップダウンを1つ持っています。私は価格の価値を得たいと思っています。jQueryを使用して選択ボックスから特定の属性値を取得

<p class="price">USD 200<p> 

<select name="options[7]" id="select_7" class=" required-entry product-custom-option"> 
<option value=""></option> 
<option value="13" price="15">Medium 14.5cm +USD15.00</option> 
<option value="14" price="35">Large - 16.5cm +USD35.00</option> 
</select> 

ダウン価格のattrよりも、変更、ドロップからの任意の値が<P>タグで基本料金に追加される必要があるときはいつも私が欲しいです。

また、誰かが値引きを選択した場合、基本価格からマイナスの値を<p>タグに設定しています。

どうすれば実現できますか?

助けていただければ幸いです。 ありがとうございます。

+3

? – Pedram

答えて

0

Jクエリ変更イベントを使用して、ドロップダウン変更値を検出できます。ドロップダウン:選択した属性を使用すると、ドロップダウンのデータ値を取得できます。あなた自身が行って何

$(document).ready(function() { 
 
    $('#select_7').on("change", function() { 
 
     if ($("#select_7 option:selected").attr('value') == "") { 
 
      $('.price').text("USD"); 
 
      $('.price2').text("USD " + parseInt(200)); 
 
     } else { 
 
      var dataid = $("#select_7 option:selected").attr('price'); 
 
      
 
      $('.price').text("USD " + dataid); 
 
      var dataPrice = 200 + parseInt(dataid); 
 
      $('.price2').text("USD " + dataPrice); 
 
     } 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="price">USD 200<p> 
 
<p class="price2">USD 200<p> 
 
    <select name="options[7]" id="select_7" class="required-entry product-custom-option"> 
 
     <option value="">Select Size</option> 
 
     <option value="13" price="15">Medium 14.5cm +USD15.00</option> 
 
     <option value="14" price="35">Large - 16.5cm +USD35.00</option> 
 
    </select>

0

priceはhtml属性ではありません。 data-priceを使用してください。

HTML: - - :

<option vaue="13" data-price="15"></option> 

はjqueryの: -

var price = $('option[value="13"]').data('price'); 
//price = 15 

$(document).ready(function(){ 
 
$('.required-entry').bind('change',function(){ 
 
    $('.price').html('USD '+$('.required-entry option[value="'+$('.required-entry').val()+'"]').data('price')); 
 
}) 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="price"><p> 
 

 
<select name="options[7]" id="select_7" class="required-entry product-custom-option"> 
 
<option value=""></option> 
 
<option value="13" data-price="15">Medium 14.5cm +USD15.00</option> 
 
<option value="14" data-price="35">Large - 16.5cm +USD35.00</option> 
 
</select>

1

互いにapproaを選択する方法

chが今、あなたは、HTMLクリーナーを維持します選択した値に

 var selected = $("#Id").val() 
    var moreDetail = lookup[selected]; 

これを取得することができますし、あなたが検索対象に多くのものを追加することができます

  var lookup = []; 
      lookup["13"] = {price : 100 , OtherStuff : ''}; 

のようなルックアップ配列を維持することです。

関連する問題