Question

详细

我想创建一个包含链接或<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>

问题

当我点击它时，它根本不会去任何地方
它就像没有任何事情一样呆在那里
网址也不会生效。

Answer 1

您无法在链接中添加其他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/

Answer 2

如果您需要一个非常简单的解决方案，您可以这样做：

<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

Answer 3

我不确定<a>标签是否应该在<option>内，这是一回事。您的HTML看起来像是在使用bootstrap，那么为什么不使用bootstraps dropdown-class？如果你真的想使用<select>，你可能需要使用JavaScript，收听一个更改事件，然后滚动到你想要的部分。

另一件事就是：

您说埃及的链接如下：

<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>

如何创建一个充满链接的下拉菜单或“<a>` tags?</a>

详细

我尝试了什么

问题

3 个答案: