如何创建带有 URL 链接的自定义选择菜单

Posted 2023-05-08

【中文标题】如何创建带有 URL 链接的自定义选择菜单

【英文标题】：How To Create Custom Select Menus with link to URL

【发布时间】：2021-07-27 05:58:30

【问题描述】：

我有这个代码：https://www.w3schools.com/howto/howto_custom_select.asp

我只想为每个选项添加一个不同的 URL，以便在单击时打开它。 我尝试了很多方法，但没有一个有效。我不懂 javascript，我认为我尝试过的选项可能与这些选项冲突。

谁能帮助解决这个问题？ 非常感谢您的时间和帮助。

【参考方案1】：

您必须为选项添加 value 和 onchange 例如：

<select onchange="window.location=this.value">
    <option value="http://www.google.com">Google</option>
    <option value="http://www.yahoo.com">Yahoo</option>
    <option value="http://www.bing.com">Bing</option>
</select>

【讨论】：

我这样做了，但它没有用：s 我已经直接在我在这里发布的链接上尝试过，没有任何改变。还有其他选择吗？

【参考方案2】：

尝试“onclick”而不是“value”。

<option onclick="window.location='http://www.google.com'">Google</option>

【讨论】：

它也不起作用：s它是否与javascript冲突？

嗯，真奇怪。它对我来说非常有效，然后我又有一个空白项目，只有我需要让它工作的代码。尝试使用仅包含您需要的代码的新编辑器，而不是 value 使用 onclick 并查看它是否以这种方式工作？让它变得简单，只需 google.com'">Google</option></select>

不幸的是，它真的不起作用:(你给我的第一个选项是独立工作的，但没有与我发布的链接中的代码结合使用。我的最后一次尝试，如果你能帮忙，解决方法。如果我使用这个：google.com">Google</option> yahoo.com">Yahoo</option> 您使用的是单独的样式表还是内联样式？如果您使用单独的样式表，您可以给 标记一个类，然后在 css 中定位该类。例如：html: css: .select-class font-size: 20px 。那应该行得通。如果您使用的是内联样式，它应该是相同的，但我强烈建议使用单独的样式表

好的！非常感谢您的时间和帮助！我真的很感激:)