使用数据列表中的值填充输入字段

Question

我正在尝试根据数据列表选择填充输入字段。因此，如果某人选择姓名 jimmy.johns，则输入字段应填充 5555555555。这是我的代码。

<html>
<head>
<title>Countdown</title>
<input name="customer" list="customer" />
<datalist id="customer">
</datalist>

<br>
<br>

<input id = "phone" name ="phone" type = "text" placeholder = "Phone Number" value = ""/>

<script type="text/javascript">
  var customer = ['david.a.onezine', 'jimmy.a.jams', 'larry.a.beatrice', 'janet.a.jackson', 'biggie.j.smalls', 'bob.marley', 'james.a.tribeca', 'veronica.a.mars', 'kassy.b.jones', 'victoria.a.langley'];
  var phone = ['54658798798', '4578912356', '425367894125', '4578913246', '7894561234', '452139856427', '47895641234', '78423651405', '789456123025', '784596123459'];
  var arraylength = customer.length;
  var i;
  var options = '';

  for(i = 0; i < arraylength; i++)
    options += '<option value="'+customer[i]+'" />';

 document.getElementById('customer').innerHTML = options;
 </script>

</body>
</html>

我认为所有需要做的就是做类似

的事情

if (options == 'david.a.onezine'){
    document.getElementById('phone').innerHTML = phone[0];
 }

然而那是行不通的。我读过我可能需要在数据列表上使用事件侦听器，但我没有使用很多 eventlisteners 所以我需要将 onChange 附加到 'customer' 输入或'customer' 数据列表？

我卡住了，脑子里只有理论部分。我明白它应该如何运作。我只是不知道如何将其放入代码中。

因此，如果选择 customer[1]，则 phone[0] 应填充到 phone 输入字段中。我只是不确定如何在 javascript 中编写代码。我宁愿代码 javascript 而不是 JQuery.

Answer 1

实现所需效果的最简单方法是使用 onchange 事件。

<html>
<head>
<title>Countdown</title>
<select name="customer" id="customer" onchange="getNumber()">
</select>

<br>
<br>

<input id = "phone" name ="phone" type = "text" placeholder = "Phone Number" value = ""/>

<script type="text/javascript">
  var customer = ['david.a.onezine', 'jimmy.a.jams', 'larry.a.beatrice', 'janet.a.jackson', 'biggie.j.smalls', 'bob.marley', 'james.a.tribeca', 'veronica.a.mars', 'kassy.b.jones', 'victoria.a.langley'];
  var phone = ['54658798798', '4578912356', '425367894125', '4578913246', '7894561234', '452139856427', '47895641234', '78423651405', '789456123025', '784596123459'];
  var arraylength = customer.length;
  var i;
  var options = '';

  options += '<option value="defualt">Choose a Name</option>';
  for(i = 0; i < arraylength; i++)
    options += '<option value="'+customer[i]+'">'+customer[i]+'</option>';
  
  document.getElementById('customer').innerHTML = options.toString();
  document.getElementById('customer').selectedIndex = 0;
  getNumber();
  
  function getNumber(){
 var index = document.getElementById('customer').selectedIndex;
 
 if(index == 0){
  document.getElementById('phone').value = "";
 } else {
  document.getElementById('phone').value = phone[index-1];
 }
  }
 </script>

</body>
</html>

<select name="customer" id="customer" onchange="getNumber()">
</select>

<input id = "phone" name ="phone" type = "text" placeholder = "Phone Number" value = ""/>

首先要设置两个输入框。请注意，第一个输入现在有一个 onchange 事件，只要输入（任何类型）发生更改，该事件就会被调用。 name input 现在是一个元素的原因是因为它允许我们利用 selectedIndex 变量，但它在语义上更清晰并且只会在完整值之一是 [= 时注册 "change" 50=]ed.

options += '<option value="defualt">Choose a Name</option>';

这是页面加载时看到的默认选项。它防止了如果用户实际上想要 select 第一个选项 'david.a.onezine' 但它不会被注册为实际更改的问题。

function getNumber(){
    var index = document.getElementById('customer').selectedIndex;

    if(index == 0){
        document.getElementById('phone').value = "";
    } else {
        document.getElementById('phone').value = phone[index-1];
    }
  }

这是 selection 列表更改时调用的函数。首先，通过内部变量 selectedIndex 检索 selected 项目。如果 index 等于 0 那么这意味着 "default" 值被 selected 并且 phone 输入设置为空字符串，否则它将被设置为 phone[index-1] 这是属于任何名字的数字 selected.

编辑：

这里是 getNumber() 的修改版本，可用于您的代码。

function getNumber(){
    var customervalue = document.getElementById('customerI').value;

    var i;
    var match = false;

    for(i = 0; i < arraylength; i++){
      if(customervalue == customer[i]){
        match = true;
        break;
      }
    }

    if(match == true){
      document.getElementById('phone').value = phone[i];
    } else {
      document.getElementById('phone').value = "";
    }
  }

请注意，数据列表更多的是为了自动完成，因此实际上没有索引或任何东西，而是供输入标签使用。此外，输入必须具有 getNumber() 才能工作的 ID；

使用数据列表中的值填充输入字段

Using values from a Datalist to populate a input field

javascript

javascript-events