我正在为我的网站创建主页，需要使用动态文本框来简化导航。
将有两个html下拉菜单。一旦用户从第一个下拉菜单中选择了一个类别，该选择中的所有相关链接都将加载到第二个下拉菜单。当用户从第二文本框中进行选择时，网页会将用户带到所选页面。第二个下拉菜单的关键是使所有项目都链接起来，这样当用户进行选择时，他们实际上是在点击指向相关网页的链接。
我上传了一个html文档，应该能让你知道我在找什么。
<!DOCTYPE html>
<head>
</head>
<body>
<center>
<h1>SELECTOR ONE</h1>
</center>
<center>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
<option>Option 7</option>
</select>
</center>
<br>
<center>
<h1>SELECTOR TWO</h1>
</center>
<center>
<select>
<option>Option 1 ITEM LINK</option>
<option>Option 1 ITEM LINK</option>
<option>Option 1 ITEM LINK</option>
<option>Option 1 ITEM LINK</option>
<option>Option 1 ITEM LINK</option>
<option>Option 1 ITEM LINK</option>
<option>Option 1 ITEM LINK</option>
<option>Option 1 ITEM LINK</option>
<option>Option 1 ITEM LINK</option>
</select>
</center>
<center>
<select>
<option>Option 2 ITEM LINK</option>
<option>Option 2 ITEM LINK</option>
<option>Option 2 ITEM LINK</option>
<option>Option 2 ITEM LINK</option>
<option>Option 2 ITEM LINK</option>
<option>Option 2 ITEM LINK</option>
<option>Option 2 ITEM LINK</option>
<option>Option 2 ITEM LINK</option>
<option>Option 2 ITEM LINK</option>
</select>
</center>
<center>
<select>
<option>Option 3 ITEM LINK</option>
<option>Option 3 ITEM LINK</option>
<option>Option 3 ITEM LINK</option>
<option>Option 3 ITEM LINK</option>
<option>Option 3 ITEM LINK</option>
<option>Option 3 ITEM LINK</option>
<option>Option 3 ITEM LINK</option>
<option>Option 3 ITEM LINK</option>
<option>Option 3 ITEM LINK</option>
</select>
</center>
<br>
</body>
</html>
简单地，将value属性添加到options，例如：
<option value="http://www.google.com">Option 3 ITEM LINK</option>
创建change事件：
$("select").change(function() {
window.location.href = this.value;
});