Как создать выпадающее меню, полное ссылок или тегов `& lt; a & gt;`?
подробности
- Я хочу создать выпадающее меню, полное ссылок или
<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>
вопрос
- Когда я нажимаю на него, он никуда не уходит
- Просто оставайся там, как ничего не случилось
- URL также не вступает в силу.
Решение
Если вам нужно очень простое решение, вы можете сделать это так:
<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>
Я не уверен, если <a> тег должен быть внутри <option>это одно. Ваш HTML выглядит так, как будто вы используете bootstrap, так почему бы вам просто не использовать droptraps dropdown-class? Если вы действительно хотите использовать <select> вам, вероятно, нужно использовать JavaScript, чтобы прослушать событие-изменение, а затем прокрутить до нужной части.
Другое дело так:
Ваша ссылка, скажем, в Египте, выглядит следующим образом:
<a href="#Egypt" >Egypt</a>
в то время как ваш соответствующий контент выглядит примерно так:
<div class="col-xs-2">
<h5 id="#Africa" >Egypt</h5>
</div>
Но чтобы ваша ссылка работала, вам нужно что-то с идентификатором, указанным в href атрибут, поэтому вы должны изменить свой код на это:
<div class="col-xs-2">
<h5 id="Egypt" >Egypt</h5>
</div>
detector