選択したオプションに応じて自動塗りつぶしフィールド

ユーザーがページを再読み込みせずに商品を選択した場合、「単価」入力に「データ価格」の商品を自動的に入力したいのですが可能ですか？選択したオプションに応じて自動塗りつぶしフィールド

<div class="row"> 
         <div class="col-sm-3"> 
          <p>Testers<br> 
          <select id="productOne" name="productOne"> 
           <option data-price="1249.99" value="1">PRO Battery Tester</option> 
           <option data-price="444.99" value="2">MDX335P</option> 
           <option data-price="494.99" value="3">MDX645</option> 
           <option data-price="694.99" value="4">MDX645P</option> 
           <option data-price="694.99" value="5">MDX655</option> 
           <option data-price="899.99" value="6">MDX655P</option> 
           <option data-price="949.99" value="7">MDX655P Start Stop</option> 
          </select></p> 
          <p>Chargers<br> 
          <select id="productTwo" name="productTwo"> 
           <option data-price="1249.99" value="1">PRO 60</option> 
           <option data-price="1249.99" value="2">MXTS 70/50 EU-K</option> 
           <option data-price="333.33" value="3">MXS 25EC UK</option> 
           <option data-price="199.99" value="4">MXS 10EC UK</option> 
           <option data-price="633.33" value="5">MXTS 40 UK</option> 
           <option data-price="266.66" value="6">MXS 25 UK</option> 
           <option data-price="266.66" value="7">MXT 14 UK</option> 
           <option data-price="175.83" value="8">MXT 4.0 UK</option> 
          </select></p> 
         </div> 
         <div class="col-sm-3"> 
          <p>Quantity<br><input type="number" name="productOneQ" min="0" step="any" value="<?php if(!is_null($productOneQ)) { echo $productOneQ; } ?>"></p> 
          <p>Quantity<br><input id="productTwoQ" type="number" name="productTwoQ" min="0" step="any" value="<?php if(!is_null($productTwoQ)) { echo $productTwoQ; } ?>"></p> 
         </div> 
         <div class="col-sm-3"> 
          <p>Unit Price<br><input id="productOneP" type="number" name="productOneP" min="0" step="any" value="<?php if(!is_null($productOneP)) { echo $productOneP; } ?>"></p> 
          <p>Unit Price<br><input id="productTwoP" type="number" name="productTwoP" min="0" step="any" value="<?php if(!is_null($productTwoP)) { echo $productTwoP; } ?>"></p> 
         </div> 
          <div class="col-sm-3"> 
           <p><span id="productOneT" class="total right">TOTAL: £<?php echo number_format($productOneTotal = $productOneP*$productOneQ, 2, '.', ','); ?></span></p> 
           <p><span id="productTwoT" class="total right">TOTAL: £<?php echo number_format($productTwoTotal = $productTwoP*$productTwoQ, 2, '.', ','); ?></span></p> 
          </div> 
         </div> 
        </div>

出典

2017-01-19 Brad Fletcher

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<body> 
 
<div class="row"> 
 
         <div class="col-sm-3"> 
 
          <p>Testers<br> 
 
          <select id="productOne" name="productOne"> 
 
           <option data-price="0" value="0">-Select-</option> 
 
\t \t \t \t \t \t \t <option data-price="1249.99" value="1">PRO Battery Tester</option> 
 
           <option data-price="444.99" value="2">MDX335P</option> 
 
           <option data-price="494.99" value="3">MDX645</option> 
 
           <option data-price="694.99" value="4">MDX645P</option> 
 
           <option data-price="694.99" value="5">MDX655</option> 
 
           <option data-price="899.99" value="6">MDX655P</option> 
 
           <option data-price="949.99" value="7">MDX655P Start Stop</option> 
 
          </select></p> 
 
          <p>Chargers<br> 
 
          <select id="productTwo" name="productTwo"> 
 
\t \t \t \t \t \t \t <option data-price="0" value="0">-Select-</option> 
 
           <option data-price="1249.99" value="1">PRO 60</option> 
 
           <option data-price="1249.99" value="2">MXTS 70/50 EU-K</option> 
 
           <option data-price="333.33" value="3">MXS 25EC UK</option> 
 
           <option data-price="199.99" value="4">MXS 10EC UK</option> 
 
           <option data-price="633.33" value="5">MXTS 40 UK</option> 
 
           <option data-price="266.66" value="6">MXS 25 UK</option> 
 
           <option data-price="266.66" value="7">MXT 14 UK</option> 
 
           <option data-price="175.83" value="8">MXT 4.0 UK</option> 
 
          </select></p> 
 
         </div> 
 
         <div class="col-sm-3"> 
 
          <p>Quantity<br><input type="number" name="productOneQ" min="0" step="any" value="<?php if(!is_null($productOneQ)) { echo $productOneQ; } ?>"></p> 
 
          <p>Quantity<br><input id="productTwoQ" type="number" name="productTwoQ" min="0" step="any" value="<?php if(!is_null($productTwoQ)) { echo $productTwoQ; } ?>"></p> 
 
         </div> 
 
         <div class="col-sm-3"> 
 
          <p>Unit Price<br><input id="productOneP" type="number" name="productOneP" min="0" step="any" value="<?php if(!is_null($productOneP)) { echo $productOneP; } ?>"></p> 
 
          <p>Unit Price<br><input id="productTwoP" type="number" name="productTwoP" min="0" step="any" value="<?php if(!is_null($productTwoP)) { echo $productTwoP; } ?>"></p> 
 
         </div> 
 
          <div class="col-sm-3"> 
 
           <p><span id="productOneT" class="total right">TOTAL: £<?php echo number_format(@$productOneTotal = $productOneP*$productOneQ, 2, '.', ','); ?></span></p> 
 
           <p><span id="productTwoT" class="total right">TOTAL: £<?php echo number_format(@$productTwoTotal = $productTwoP*$productTwoQ, 2, '.', ','); ?></span></p> 
 
          </div> 
 
         </div> 
 
        </div> 
 
<script> 
 
$('#productOne').change(function(e) { 
 
     var element = $(this).find('option:selected'); 
 
     var myTag = element.attr("data-price"); 
 
\t \t $('#productOneP').val(myTag); 
 
}); 
 
$('#productTwo').change(function(e) { 
 
     var element = $(this).find('option:selected'); 
 
     var myTag = element.attr("data-price"); 
 
\t \t $('#productTwoP').val(myTag); 
 
}); 
 
</script> 
 
</body> 
 
</html>

出典

2017-01-19 09:21:50

選択したオプションに応じて自動塗りつぶしフィールド

答えて

関連する問題