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

相同

所以你需要“听”＆＃39;更改select后，查看选择了哪个options（option:selected）。那么＆＃39;得到＆＃39; ＆＃39;所选＆＃39;的data-phone属性选项并将其添加为＆＃39;值＆＃39;到输入栏。

及其相关的

我还建议您使用空白＆＃39; select标签的第一个选项。正如我在下面使用（<option disabled selected value>）

让我知道它是否有效。欢呼声

＆＃13;

$("#contact").change(function(){
   var phoneNr = $(this).children("option:selected").attr("data-phone")
   $("input[name='phone']").attr("value",phoneNr)
})

＆＃13;

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

＆＃13;

Answer 2

您可以使用jQuery change事件，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"/>

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

2 个答案: