如何添加指向 Bootstrap 选择选项的链接

Posted

技术标签:

【中文标题】如何添加指向 Bootstrap 选择选项的链接【英文标题】:How to Add a link to Bootstrap Select Options 【发布时间】:2013-08-09 06:49:57 【问题描述】:

您好,我正在尝试添加指向 Bootstrap 选择选项的链接。我是怎么做到的

这是我的代码

<select class="visible-phone span3 select-margintop">
    <option>Servicios</option>
    <option><a href="link . com">Test 1</a></option>
    <option><a href="link . com">Test 2</a></option>
    <option><a href="link . com">Test 3</a></option>
</select>

谢谢

【问题讨论】:

【参考方案1】:

应该工作:

<select onchange="location = this.value;">
 <option value="home.html">home</option>
 <option value="team.html">team</option>
 <option value="contact.html">contact</option>
</select>

【讨论】:

对于更简单的解决方案onchange="location = this.value;" 也可以。【参考方案2】:

不是最符合语义的解决方案,但你也可以试试这个:

<select>
    <option onClick="window.location = 'http://www.foo.bar'" >Foo</option>
    <option onClick="window.location = 'http://www.foo.bar'">Bar</option>
</select>

【讨论】:

【参考方案3】:

您不能在 select 元素内创建链接。但是,您可以在用户被选中时使用value 重定向用户。

<select class="visible-phone span3 select-margintop">
    <option>Servicios</option>
    <option value="link.com">Link 1</option>
</select>

【讨论】:

你应该修复选项内的&lt;/a&gt;标签。 :P 一定错过了【参考方案4】:

也许是这样的?

<select name="forma" onchange="location = this.options[this.selectedIndex].value;">
 <option value="Home.php">Home</option>
 <option value="Contact.php">Contact</option>
 <option value="Sitemap.php">Sitemap</option>
</select>

【讨论】:

以上是关于如何添加指向 Bootstrap 选择选项的链接的主要内容,如果未能解决你的问题,请参考以下文章

指向 Bootstrap 导航选项卡的 href 链接未在同一页面上激活

如何动态地将选项添加到 Bootstrap 选择器?

如何使用Bootstrap选项卡指向另一个网站?

如何在 bootstrap vue 的 b-tabs 中显示按钮?

在引导表中添加链接

如何将变量添加到卡中的图像链接(vue-bootstrap)?