<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
type
<select name="type" id="type" onchange="onChangeType(this)" >
<option value="text">text</option>
<option value="tel">tel</option>
<option value="password" selected>password</option>
</select>
<input type="text" id="target">
</body>
<script type="text/javascript">
window.onload = function() {
onChangeType(
document.querySelector('#type')
)
};
function onChangeType(el) {
let targetType = el.options[el.selectedIndex].value
document.querySelector('#target').setAttribute('type', targetType)
}
</script>
</html>
