javascript - 如何根据选择框的数据属性填充文本输入

Question

我有一个选择框和一个输入框

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

当用户从 Contact 选择框中选择一个选项时，我希望该选项的 data-phone 属性填充到 Phone 中文本输入。

对于用户来说，他们从列表中选择一个名字，然后这个人的电话号码神奇地自动填充到下面的输入字段中

我该怎么做？

Answer 1

有一个 change() 方法附加了一个函数，以便在发生更改事件时运行。 select 标签与 change() 方法一起使用。与 checkbox 或 radio 相同

因此您需要在 select 更改时“监听”并查看选择了哪个 options(使用 option:selected)。然后“获取”“已选择”选项的 data-phone 属性并将其作为“值”添加到输入字段。

就是这样

我还建议您为选择标签使用“空白”第一个选项。正如我在下面使用的 (<option disabled selected value>)

让我知道它是否有效。干杯

$("#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"/>