<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.go {
display: none;
}
.go.show{
display: block;
overflow: hidden;
width: 24em;
font-size: 180%;
white-space: nowrap;
}
.go.show{
animation: typewriter 4s steps(64) 1s 1 normal both;
}
@keyframes typewriter{
from{width: 0;}
to{width: 100%;}
}
.go a{
text-decoration:none; display: inline-block;
}
.go a:after{
display: block;content: "";height: 2px;width: 0%;background-color: #000000;
}
.go.show a:after{animation: typewriter .8s 3s cubic-bezier(.36,.89,.53,-0.61) both; }
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var select = document.querySelector('.opt'),
div = document.querySelector('.go'),
a = div.querySelector('a'),
inp = document.querySelector('#proso2');
arr = [
{href : "", text : "по умолчанию", title : ""},
{href : "http://test1.ru/", text : "просмотр №1", title : "тут ссылка от выбранного value 1", price : "1"},
{href : "http://test2.ru/", text : "просмотр №2", title : "тут ссылка от выбранного value 2", price : "2"},
{href : "http://test3.ru/", text : "просмотр №3", title : "тут ссылка от выбранного value 3", price : "3"}
];
arr.forEach(function(el,i) {
select.options[i] = new Option(el.text,i)
})
select.addEventListener('change', function() {
div.classList.remove("show");
document.body.clientHeight;
inp.value = "";
if(this.value != "0"){
var d = arr[this.value];
a.href = d.href;
a.text = d.title;
inp.value = d.price;
div.classList.add("show");
}
});
});
</script>
</head>
<body>
<select class="opt"></select>
<div class="go"><a></a></div><br>
<input type="text" id="proso2"/>
</body>
</html>