Javascript 根据所选选项自动填充字段
当用户选择产品时,我想用产品“数据价格”自动填充“单价”输入,而无需重新加载页面。这可能吗Javascript 根据所选选项自动填充字段,javascript,Javascript,当用户选择产品时,我想用产品“数据价格”自动填充“单价”输入,而无需重新加载页面。这可能吗 <div class="row"> <div class="col-sm-3"> <p>Testers<br> <select id="productOne" name="productOne"> <option data-price="1249.99" value="1">
<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>
测试员
PRO电池测试仪
MDX335P
MDX645
MDX645P
MDX655
MDX655P
MDX655P启动-停止
充电器
PRO 60
MXTS 70/50 EU-K
MXS 25EC英国
MXS 10EC英国
MXTS 40英国
MXS 25英国
MXT 14英国
MXT 4.0英国
数量为什么不只使用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>
这应该适用于jQuery:
$('select[name="productTwo"]').change(function() {
$('input[name="productTwoP"]').val($(this).val());
});
注意:选择选项的值必须是整数,如果不可能,则必须将productTwoP的输入类型更改为text而不是number
<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>
PRO 60
MXTS 70/50 EU-K
MXS 25EC英国
MXS 10EC英国
MXTS 40英国
MXS 25英国
MXT 14英国
MXT 4.0英国
或者将价格添加为属性,例如
<option data-price="60" value="chargerOne"></option>
然后用$(this)读取数据价格值。数据('price')
想要用JQuery、JQuery或vanilla编码,我不知道怎么做试试JQuery!!:)尝试angular、knockout等。是的,但我如何在JQuery中执行此操作?是否显示错误?包括jquery库或CDN。
<option data-price="60" value="chargerOne"></option>