<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ГГ</title>
<style>
*{
margin:0;
padding:0;
outline: 0;
}
.choice {
width: 100%;
}
input {
height: 100px;
}
h1 {
display: inline-block;
}
.result {
color: red;
display: inline-block;
}
</style>
</head>
<body>
<div>
<form name="menufrm">
<div class="choice">
<select name="menu1">
<option value="">Категория 1</option>
<option value="a1">a1</option>
<option value="a2">a2</option>
<option value="a3">a3</option>
<option value="a4">a4</option>
</select>
<select name="menu2">
<option value="">Категория 2</option>
<option value="b1">b1</option>
<option value="b2">b2</option>
<option value="b3">b3</option>
<option value="b4">b4</option>
</select>
<select name="menu3">
<option value="">Категория 3</option>
<option value="c1">c1</option>
<option value="c2">c2</option>
<option value="c3">c3</option>
<option value="c4">c4</option>
</select>
<select name="menu4">
<option value="">Категория 4</option>
<option value="d1">d1</option>
<option value="d2">d2</option>
<option value="d3">d3</option>
<option value="d4">d4</option>
</select>
<input type="button" value="Перейти" onclick="combineMenus(this.form, this.form.menu1, this.form.menu2,this.form.menu3,this.form.menu4)" />
</div>
<h1>Результат:</h1>
<h2 class="result"></h2>
</form></div>
<script language="JavaScript">
//<![CDATA[
<!-- Original: Ronnie T. Moore, Editor -->
<!-- Idea by: Selvi Narayanan -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! [url]http://javascript.internet.com[/url] -->
<!-- Begin
function combineMenus(frm, menu1, menu2, menu3, menu4) {
with (frm) {
str = menu1.options[menu1.selectedIndex].value+" ";
str += menu2.options[menu2.selectedIndex].value+" ";
str += menu3.options[menu3.selectedIndex].value+" ";
str += menu4.options[menu4.selectedIndex].value+" ";
document.querySelector('.result').innerHTML = str;
}
}
// End -->
//]]>
</script>
</body>
</html>