带链接的动态下拉菜单
Dynamic Drop-Down with Links
我正在为我的网站创建主页,需要使用动态文本框来简化导航。
将有两个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;
});
相关文章:
- 动态填充两个下拉菜单
- 如何使Jquery编码的动态下拉菜单与PHP GET变量协调工作
- 动态下拉菜单使用JavaScript而不使用数据库
- 如何在jquery mobile中使用json文件创建动态下拉菜单
- 如何动态创建下拉菜单
- 语义UI动态下拉菜单重新初始化问题
- 在javascript中动态添加一个选择下拉菜单
- '使用文本区域中的字符串动态填充下拉菜单
- 如何在JavaScript中动态创建下拉菜单列表
- javascript:动态下拉菜单值
- 使用下拉菜单的Ajax动态内容
- 动态替换下拉菜单选项jQuery
- 使用jQuery动态设计js下拉菜单的样式
- 动态下拉菜单,$_GET带空格
- 在动态输入数据的下拉菜单中设置默认值
- 将自定义下拉菜单添加到 tinyMCE 并插入动态内容
- AJAX RETURN 帮助 php/mysql 动态下拉菜单
- 动态下拉菜单相对于浏览器窗口的宽度显示
- 下拉菜单动态填充第二个下拉菜单
- 多个下拉菜单动态更改文本表单字段