Question

我的脚本

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    div {
      padding: 10px 0;
    }
  </style>
</head>
<body>
  <div>
    <label for="Gzb">Enter Your Vehicle Number</label>
    <input list="Vehicle Numbers" id="Gzb" name="Gzb" />

    <datalist id="Vehicle Numbers">
      <option value="DL01GB235">
      <option value="HR38K1350">
      <option value="HR38M4985">
    </datalist>
  </div>
  <div>
    <label for="phone-number">Phone Number of vehicle:</label>
    <input type="text" id="phone-number" name="phone-number" />
  </div>

  <script type="text/javascript" src="script.js"></script>
</body>
</html>

JAVASCRIPT

var VEHICLE_NUMBER_LOCATION = 0;
var PHONE_NUMBER_LOCATION = 1;

var phoneNumber = document.getElementById('phone-number');
var inputGzb = document.getElementById('Gzb');

var vehicleInformation = [
  ['DL01GB2355', '555123456'],
  ['HR38K1350', '111234111'],
  ['HR38M4985', '222345222']
];
inputGzb.addEventListener('keyup', searchVehicleInformation);
inputGzb.addEventListener('blur', searchVehicleInformation);
function searchVehicleInformation() {
  var desiredVehicleNumberIndex;
  vehicleInformation.forEach((vehicle, index) => {
    if (vehicle[VEHICLE_NUMBER_LOCATION] === this.value) {
      desiredVehicleNumberIndex = index;
    }
  });
  if (desiredVehicleNumberIndex !== undefined) {
    phoneNumber.value = vehicleInformation[desiredVehicleNumberIndex][PHONE_NUMBER_LOCATION];
  } else {
    phoneNumber.value = '';
  }
}

它工作正常，但我不想使用datalist的HTML 我想触发数组的第一个元素作为datalist选项，并在通过Jquery输入框表示如果选择DL01GB2355，则其他输入值应为555123456

通过Jquery触发数组的第一个元素

0 个答案: