Question

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

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

Answer 1

简单，在value添加options属性，例如：

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

创建change事件：

$("select").change(function() {
    window.location.href = this.value;
});

带链接的动态下拉菜单

1 个答案: