-1

我正在为我的网站创建一个主页，并且需要使用动态文本框来简化导航。

将有两个 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>
4

1 回答 1

3

很简单，value在你的 中添加一个属性options，例如：

<option value="http://www.google.com">Option 3 ITEM LINK</option>

创建一个change事件：

$("select").change(function() {
    window.location.href = this.value;
});
于 2013-07-29T20:30:18.507 回答