Details
- 我想创建一个包含链接或
<a>标签的下拉菜单 - 当我单击它们时，将放大到我单击的选项。
我尝试过什么
PHP/HTML
<div class="col-sm-6 drop-down ">
Select Country :
<select id="state" name="state" class="select2" data-placeholder="Click to Choose...">
<option value="">--Select--</option>
<?php
foreach(array_unique($countries) as $country){ ?>
<option href="#<?php echo $country ; ?>" value="#<?php echo $country ; ?> "><a href="#<?php echo $country ; ?>" ><?php echo $country ; ?></a> </option>
<?php } ?>
</select>
</div>
问题
- 当我点击它时，它根本不会去任何地方
- 它只是呆在那里，就像什么都没发生一样
- 网址也不会生效。
如果你需要一个非常简单的解决方案，你可以这样做：
<select onchange="window.location=this.value">
<option value="">Select:</option>
<option value="http://google.com">google</option>
<option value="http://yahoo.com">yahoo</option>
</select>
在这种情况下，您应该使用 window.location.hash 而不是 window.location
链接中不能有其他 html。
而是使用锚点作为选项的值，并在检测到更改时使用 javascript 进行设置：
<select onchange="go(this.value);">
<option value="#one">1</option>
<option value="#two">2</option>
<option value="#three">3</option>
</select>
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
<script>
function go(link){
window.location.hash = link;
}
</script>
http://jsfiddle.net/dcg5t097/
我不确定<a>标签是否应该在<option>内，这是一回事。你的HTML看起来像你在使用bootstrap，那么你为什么不只使用bootstraps dropdown-class呢？如果你真的想使用<select>你可能需要使用JavaScript，收听change-Event，然后滚动到你想要的部分。
另一件事是这样的：
您的链接，比如埃及，如下所示：
<a href="#Egypt" >Egypt</a>
而您的相应内容如下所示：
<div class="col-xs-2">
<h5 id="#Africa" >Egypt</h5>
</div>
但是要使链接正常工作，您实际上需要具有 href 属性中指定的 id 的东西，因此您应该将代码更改为以下内容：
<div class="col-xs-2">
<h5 id="Egypt" >Egypt</h5>
</div>