[英]How do I fill a text input based on the data attribute of a select box
I have a select box and an input field 我有一个选择框和一个输入字段
<label for="contact">Contact</label> <select id="contact" name="contact"> <option data-phone="+14151234567" value="John Smith">John Smith</option> <option data-phone="+15151234567" value="Jessica Smith">Jessica Smith</option> <option data-phone="+16151234567" value="Jerome Smith">Jerome Smith</option> </select> <label for="phone">Phone</label> <input type="text" name="phone"/>
When the user selects an option from the Contact
select box, I want the option's data-phone
attribute to be filled in the Phone
text input. 当用户从“
Contact
选择框中选择一个选项时,我希望在“ Phone
文本输入中填充该选项的data-phone
属性。
For the user, they pick a name from a list, and the person's phone number magically autofills in the input fields below 对于用户,他们从列表中选择一个姓名,然后该人的电话号码自动在下面的输入字段中自动填充
How do I do this? 我该怎么做呢?
there is a change() method that attaches a function to run when a change event occurs. 有一个change()方法可在发生更改事件时附加要运行的函数。
select
tags work with change()
method . select
标记可与change()
方法一起使用。 same as checkbox
or radio
与
checkbox
或radio
相同
so you need to 'listen' when the select
is changed and see which of the options
is selected ( with option:selected
) . 因此,当更改
select
内容时,您需要“收听”,并查看select
哪个options
(带有option:selected
)。 then 'get' the data-phone
attribute of the 'selected' option and add it as a 'value' to the input field. 然后“获取”“选定”选项的
data-phone
属性,并将其作为“值”添加到输入字段。
and that's about it 就是这样
also i suggest you use a 'blank' first option for the select tag. 我也建议您为选择标签使用“空白”优先选项。 as i have used below (
<option disabled selected value>
) 如我在下面使用的(
<option disabled selected value>
)
let me know if it works. 让我知道它是否有效。 cheers
干杯
$("#contact").change(function(){ var phoneNr = $(this).children("option:selected").attr("data-phone") $("input[name='phone']").attr("value",phoneNr) })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label for="contact">Contact</label> <select id="contact" name="contact"> <option disabled selected value> --- select an option --- </option> <option data-phone="+14151234567" value="John Smith">John Smith</option> <option data-phone="+15151234567" value="Jessica Smith">Jessica Smith</option> <option data-phone="+16151234567" value="Jerome Smith">Jerome Smith</option> </select> <label for="phone">Phone</label> <input type="text" name="phone"/>
You could use jQuery change
event, jQuery .val()
and .data()
functions: 您可以使用jQuery
change
event,jQuery .val()
和.data()
函数:
var $contact = $('#contact'); $contact.on('change', fillPhone); function fillPhone() { $('input[name="phone"]').val( $contact.find('option:selected').data('phone') ); } fillPhone();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label for="contact">Contact</label> <select id="contact" name="contact"> <option data-phone="+14151234567" value="John Smith">John Smith</option> <option data-phone="+15151234567" value="Jessica Smith">Jessica Smith</option> <option data-phone="+16151234567" value="Jerome Smith">Jerome Smith</option> </select> <label for="phone">Phone</label> <input type="text" name="phone"/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.