[英]jQuery select onChange update input field value
I have multiple sets of select
and input
s in one form and I need to update each input based on the selected value. 我在一个表单中有多组
select
和input
,我需要根据所选值更新每个输入。 Update the price in the input field based on the select dropdown. 根据选择下拉列表更新输入字段中的价格。
The drop-down carries a value and a data attribute. 下拉列表包含值和数据属性。 The value is the quantity, and the data-attr is the price.
值是数量,data-attr是价格。
So when you select <1>
from the drop-down, the input will change to <1> *
its data-attribute. 因此,当您从下拉列表中选择
<1>
时,输入将更改为<1> *
其数据属性。
I don't want to use ID's or classes or names to get current onChange. 我不想使用ID或类或名称来获取当前的onChange。
// jQuery onChange this particular {select_drop_down} // jQuery onChange这个特殊的{select_drop_down}
<select class="select">
<option value="1" data-price="2.99">1</option>
<option value="2" data-price="2.99">2</option>
<option value="3" data-price="2.99">3</option>
<option value="4" data-price="2.99">4</option>
</select>
// update this input's value to the selected:index * data-price. //将此输入值更新为所选:index * data-price。 // new value: if option value=2 is selected, change input[type=text] to the new value.
//新值:如果选择了选项值= 2,则将输入[type = text]更改为新值。
<input type="text" value="2.99">
// same goes for the next {select_drop_down} //同样适用于下一个{select_drop_down}
<select class="select">
<option value="1" data-price="1.99">1</option>
<option value="2" data-price="1.99">2</option>
<option value="3" data-price="1.99">3</option>
<option value="4" data-price="1.99">4</option>
</select>
<input type="text" value="1.99">
So this is what I have so far: 所以这就是我到目前为止所做的:
$(".select").change(function () {
newPrice = 2.99; // I NEED HERE THE CURRENT data-price value;
$(".one option:selected").each(function () {
Price = newPrice*$(".unit").val();
});
$(this).nextAll('input').first().focus().val(Price.toFixed(2))
});
this works but only for the first drop-down, not the second. 这有效,但只适用于第一次下拉,而不是第二次下拉。
Within the event change
use the following to get the current selected option: 在事件
change
使用以下命令获取当前选定的选项:
var newPrice = $(this).children(':selected').data('price');
The following code snippet just prints the selected value and set the newPrice
to the next input
field using $(this).next('input').focus().val(newPrice);
下面的代码片段只打印选定的值,并使用
$(this).next('input').focus().val(newPrice);
将newPrice
设置为下一个input
字段$(this).next('input').focus().val(newPrice);
. 。
Now you can do any logic with that value. 现在,您可以使用该值执行任何逻辑。
$(".select").change(function () { newPrice = $(this).children(':selected').data('price'); console.log(newPrice); /* $(".one option:selected").each(function () { Price = newPrice*$(".unit").val(); });*/ $(this).next('input').focus().val(newPrice); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="select"> <option value="1" data-price="1.99">1</option> <option value="2" data-price="2.99">2</option> <option value="3" data-price="3.99">3</option> <option value="4" data-price="4.99">4</option> </select> <input type="text" value="1.99">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.