javascript - 想要使用 Jquery 更改功能打开链接

Question

我有一个下拉列表，我制作了一个单独的 div 并将所有这些链接放入其中。现在我想使用 Javascript 更改功能打开这些链接。请告诉我如何使用 anchor 标签的那些 id。

<div id="div1" style="display:none">
    <a id="0" href="http://www.friferie.dk/inspiration/Belgien">Belgium</a>
    <a id="1" href="http://www.friferie.dk/inspiration/Bulgarien">Bulgarien</a>
    <a id="2" href="http://www.friferie.dk/inspiration/Danmark">Danmark</a>
    <a id="3" href="http://www.friferie.dk/inspiration/England">England</a>
    <a id="4" href="http://www.friferie.dk/inspiration/Frankrig">Frankrig</a>
    <a id="5" href="http://www.friferie.dk/inspiration/Gr%C3%A6kenland">Belgium</a>
    <a id="6" href="http://www.friferie.dk/inspiration/Holland">Holland</a>
    <a id="7" href="http://www.friferie.dk/inspiration/Italien">Italien</a>
    <a id="8" href="http://www.friferie.dk/inspiration/Kroatien">Kroatien</a>
    <a id="9" href="http://www.friferie.dk/inspiration/Luxembourg">Luxembourg</a>
    <a id="10" href="http://www.friferie.dk/inspiration/Norge">Norge</a>
    <a id="11" href="http://www.friferie.dk/inspiration/Portugal">Portugal</a>
    <a id="12" href="http://www.friferie.dk/inspiration/San%20Marino">San Marino</a>
    <a id="13" href="http://www.friferie.dk/inspiration/Schweiz">Schweiz</a>
    <a id="14" href="http://www.friferie.dk/inspiration/Slovenien">Slovenien</a>
    <a id="15" href="http://www.friferie.dk/inspiration/Spanien">Spanien</a>
    <a id="16" href="http://www.friferie.dk/inspiration/Sverige">Sverige</a>
    <a id="17" href="http://www.friferie.dk/inspiration/Tjekkiet">Tjekkiet</a>
    <a id="18" href="http://www.friferie.dk/inspiration/Tyrkiet">Tyrkiet</a>
    <a id="19" href="http://www.friferie.dk/inspiration/Tyskland">Tskyland</a>
    <a id="20" href="http://www.friferie.dk/inspiration/Ungarn">Ungarn</a>
    <a id="21" href="http://www.friferie.dk/inspiration/%C3%98strig">Ostrig</a>
</div>

<select name="ctl00$ContentPlaceHolder1$ddl_country" id="ctl00_ContentPlaceHolder1_ddl_country" onchange="javascript:redirect();" style="width: 170px; margin-right: 15px;">
    <option value="Vælg land">V&#230;lg land</option>
    <option value="Belgien">Belgien</option>
    <option value="Bulgarien">Bulgarien</option>
    <option value="Danmark">Danmark</option>
    <option value="England">England</option>
    <option value="Frankrig">Frankrig</option>
    <option value="Grækenland">Gr&#230;kenland</option>
    <option value="Holland">Holland</option>
    <option value="Italien">Italien</option>
    <option value="Kroatien">Kroatien</option>
    <option value="Luxembourg">Luxembourg</option>
    <option value="Norge">Norge</option>
    <option value="Portugal">Portugal</option>
    <option value="San Marino">San Marino</option>
    <option value="Schweiz">Schweiz</option>
    <option value="Slovenien">Slovenien</option>
    <option value="Spanien">Spanien</option>
    <option value="Sverige">Sverige</option>
    <option value="Tjekkiet">Tjekkiet</option>
    <option value="Tyrkiet">Tyrkiet</option>
    <option value="Tyskland">Tyskland</option>
    <option value="Ungarn">Ungarn</option>
    <option value="Østrig">&#216;strig</option>
</select>

脚本

$("#ctl00_ContentPlaceHolder1_ddl_country").change(function() {
});

Answer 1

不需要<div>成千上万的anchors在里面。您可以使用重定向页面的基本 URL，在选择更改时，获取所选选项的值并通过附加到基本 URL 重定向到它。

var baseHref = 'http://www.friferie.dk/inspiration/';

$("#ctl00_ContentPlaceHolder1_ddl_country").change(function () {
    window.location.href = baseHref + encodeURIComponent($(this).find('option:selected').val());
});

演示

var baseHref = 'http://www.friferie.dk/inspiration/';

$("#ctl00_ContentPlaceHolder1_ddl_country").change(function() {
  alert('Redirecting to: ' + baseHref + encodeURIComponent($(this).find('option:selected').val()));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select name="ctl00$ContentPlaceHolder1$ddl_country" id="ctl00_ContentPlaceHolder1_ddl_country" onchange="javascript:redirect();" style="width: 170px; margin-right: 15px;">
  <option value="Vælg land">V&#230;lg land</option>
  <option value="Belgien">Belgien</option>
  <option value="Bulgarien">Bulgarien</option>
  <option value="Danmark">Danmark</option>
  <option value="England">England</option>
  <option value="Frankrig">Frankrig</option>
  <option value="Grækenland">Gr&#230;kenland</option>
  <option value="Holland">Holland</option>
  <option value="Italien">Italien</option>
  <option value="Kroatien">Kroatien</option>
  <option value="Luxembourg">Luxembourg</option>
  <option value="Norge">Norge</option>
  <option value="Portugal">Portugal</option>
  <option value="San Marino">San Marino</option>
  <option value="Schweiz">Schweiz</option>
  <option value="Slovenien">Slovenien</option>
  <option value="Spanien">Spanien</option>
  <option value="Sverige">Sverige</option>
  <option value="Tjekkiet">Tjekkiet</option>
  <option value="Tyrkiet">Tyrkiet</option>
  <option value="Tyskland">Tyskland</option>
  <option value="Ungarn">Ungarn</option>
  <option value="Østrig">&#216;strig</option>

</select>