使用數據列表中的值填充輸入字段

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 “客戶”的輸入或“客戶”的DataList？

我被困住了並且在理論上占據了我的頭。 我了解它應該如何工作。 我只是不知道如何將其放入代碼中。

因此，如果選擇了customer[1]則應在電話輸入字段中填充phone[0] 。 我只是不確定如何在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事件，只要更改輸入（任何類型），便會調用該事件。 名稱輸入現在是元素的原因是因為它允許我們利用selectedIndex變量，但是它在語義上更簡潔，並且僅在選擇完整值之一時才會注冊“更改”。

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

這是頁面加載時看到的默認選項。 它避免了以下問題：如果用戶確實要選擇第一個選項“ 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];
    }
  }

這是在選擇列表更改時隨時調用的函數。 首先，通過內部變量selectedIndex檢索選定的項目。 如果index等於0，則意味着選擇了“默認”值，並且電話輸入被設置為空字符串，否則它將被設置為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 = "";
    }
  }

請注意，數據列表更多是出於自動完成的目的，因此實際上沒有索引或任何內容，而是供輸入標記使用的。 輸入還必須具有一個ID，getNumber（）才能工作；

使用數據列表中的值填充輸入字段

問題描述

1 個解決方案

解決方案1
1 已采納 2015-05-18 19:21:49

使用數據列表中的值填充輸入字段

問題描述

1 個解決方案

解決方案1 1 已采納 2015-05-18 19:21:49

解決方案1
1 已采納 2015-05-18 19:21:49