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];
 }

然而，这不起作用。我已经读过我可能需要在datalist上使用事件监听器，但我没有使用过多eventlisteners因此我需要将onChange附加到'customer'输入或'客户的数据主义者？

我陷入了困境并且在理论上占有一席之地。我明白它应该如何运作。我只是不知道如何把它放入代码中。

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

Answer 1

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

＆＃13;

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

＆＃13;

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

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

首先，首先设置两个输入框。请注意，第一个输入现在有一个 onchange 事件，只要输入（任何类型）发生更改，就会调用该事件。名称输入现在是元素的原因是因为它允许我们利用selectedIndex变量，但它在语义上更清晰，并且只会注册＆＃34;更改＆＃34;当选择其中一个完整值时。

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

这是页面加载时看到的默认选项。它可以防止如果用户确实想要选择第一个选项＆＃39; david.a.onezine＆＃39;但它不会被注册为实际更改的问题。

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

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

这是在选择列表更改时随时调用的函数。首先，通过内部变量 selectedIndex 检索所选项目。如果index等于0则表示＆＃34;默认＆＃34;选择了值并且手机输入设置为空字符串，否则将设置为 phone [index-1] ，这是属于所选名称的数字。

编辑：

以下是 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才能工作;

使用Datalist中的值填充输入字段

1 个答案: