선택한 옵션에 따라 자동 채우기 필드

Question

사용자가 페이지를 다시로드하지 않고 제품을 선택하면 "단가"입력에 "데이터 가격"제품을 자동 입력하려고합니다. 이것이 가능한가?

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

Answer 1

왜 자바 스크립트 만 사용하지 않습니까? 자, 제 솔루션을 살펴보십시오.

HTML은 비슷합니다.

<div class="row"> 
        <div class="col-sm-3"> 

         <p>Chargers<br> 
         <select id="xyz" name="productTwo"> 
          <option data-price="p1" value="chargerOne">PRO 60</option> 
          <option data-price="p2" value="chargerTwo">MXTS 70/50 EU-K</option> 
          <option data-price="p3" value="chargerThree">MXS 25EC UK</option> 
          <option data-price="p4" value="chargerFour">MXS 10EC UK</option> 
          <option data-price="p5" value="chargerFive">MXTS 40 UK</option> 
          <option data-price="p6" value="chargerSix">MXS 25 UK</option> 
          <option data-price="p7" value="chargerSeven">MXT 14 UK</option> 
          <option data-price="p8" value="chargerEight">MXT 4.0 UK</option> 
         </select></p> 
        </div> 

<div class="col-sm-3"> 
         <p>Quantity<br><input id="q" type="number" name="productTwoQ" min="0" step="any"></p> 
        </div> 
        <div class="col-sm-3"> 
         <p>Unit Price<br><input id="p" type="number" name="productTwoP" min="0" step="any"></p> 
        </div> 
         <div class="col-sm-3"> 
          <p><span class="total right" id="t"></span></p> 
         </div> 
        </div> 

이제 js;

$("#xyz").change(function(){ 

    $("#q").val($(this).val()); 
    $("#p").val($(this).attr("data-price")); 

    $("#t").html("Total : "+($(this).val()*$(this).attr("data-price"))) 
}) 

Answer 2

이 jQuery를 함께 작동합니다 :

$('select[name="productTwo"]').change(function() { 
    $('input[name="productTwoP"]').val($(this).val()); 
}); 

참고 : 당신의 선택 옵션의 값은 정수 여야하는데,이 방법을 사용할 수없는 경우 텍스트 productTwoP의 입력 형식을 변경해야 번호 대신.

<select name="productTwo"> 
           <option value="60">PRO 60</option> 
           <option value="70">MXTS 70/50 EU-K</option> 
           <option value="25">MXS 25EC UK</option> 
           <option value="chargerFour">MXS 10EC UK</option> 
           <option value="chargerFive">MXTS 40 UK</option> 
           <option value="chargerSix">MXS 25 UK</option> 
           <option value="chargerSeven">MXT 14 UK</option> 
           <option value="chargerEight">MXT 4.0 UK</option> 
          </select> 

또는 가격으로 속성을 추가하십시오.

<option data-price="60" value="chargerOne"></option> 

및 jQuery를 사용 $(this).data('price')