JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form action="">
    <label for="user">User:</label>
    <input type="text" name="user">
    <br/>
    <label for="password">Password:</label>
    <input type="text" name="password">
    <br/>
    <select name="id" id="select">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </form>
</body>
</html>

JavaScript

const users = {
	'1' : {
  name: 'Vasya',
  password: 'qwerty'
  },
  '2' : {
  name: 'Kolya',
  password: 'ytrewq'
  },
  '3' : {
  name: 'Petya',
  password: 'slozhno'
  }
}

const userInp = document.querySelector('input[name="user"]');
const passwInp = document.querySelector('input[name="password"]');
const selectInp = document.getElementById('select');

userInp.value = users['1'].name;
passwInp.value = users['1'].password;

selectInp.addEventListener('change', function() {
	userInp.value = users[this.value].name;
	passwInp.value = users[this.value].password;
});