Question

当用户选择产品而不重新加载页面时，我想用产品“data-price”自动填充“单价”输入。这可能吗？

<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

为什么不使用javascript？好的，看看我的解决方案;

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：

/(\),\(\d{1,4},|,\d{10},)?./s

注意：选择选项的值必须是整数，如果不可能，则必须将productTwoP的输入类型更改为文本而不是数字。

$1

或将价格添加为属性，例如

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

并使用<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>

读取数据价格值

根据所选的选项自动填充字段

2 个答案: