javascript - 使用 hrefs 使用 jquery 构建选择表单

Question

我正在尝试构建一个可以使用 jQuery 的“简单”语言选择器。

我知道我也可以使用带有表单 select 和 的标准 HTML 来构建它，但据我了解，使用 OnClick location.ref 值构建一个选择表单来跳转到 URL 对 SEO 不太友好。

原因是当从移动设备查看网页时，我想触发例如iPhone 滚轮选择器而不是长列表。

想法:

拥有一个包含自己国家的列表，如下所示:

<div id="countryselector">
<ul>
 <li><a href="/cz/"><img src="/language/CZ.png"  alt="Czech" title="Czech" class="landeflag"/> - Czech</a></li>
    <li><a href="/dk/"><img src="/language/DK.png"  alt="Danish" title="Danish" class="landeflag"/> - Danish</a></li>
    <li><a href="/fi/"><img src="/language/FI.png"  alt="Finnish" title="Finnish" class="landeflag"/> - Finnish</a></li>
    <li><a href="/fr/"><img src="/language/FR.png"  alt="French" title="French" class="landeflag"/> - French</a></li>
    <li><a href="/de/"><img src="/language/DE.png"  alt="Deutsch" title="Deutsch" class="landeflag"/> - Deutsch</a></li>
    <li><a href="/it/"><img src="/language/IT.png"  alt="Italian" title="Italian" class="landeflag"/> - Italian</a></li>
    <li><a href="/no/"><img src="/language/NO.png"  alt="Norwegian" title="Norwegian" class="landeflag"/> - Norwegian</a></li>
    <li><a href="/pl/"><img src="/language/PL.png"  alt="Polish" title="Polish" class="landeflag"/> - Polish</a></li>
    <li><a href="/pt/"><img src="/language/PT.png"  alt="Portuguese" title="Portuguese" class="landeflag"/> - Portuguese</a></li>
    <li><a href="/ru/"><img src="/language/RU.png"  alt="Russian" title="Russian" class="landeflag"/> - Russian</a></li>
    <li><a href="/es/"><img src="/language/ES.png"  alt="Spanish" title="Spanish" class="landeflag"/> - Spanish</a></li>
    <li><a href="/se/"><img src="/language/SE.png"  alt="Swedish" title="Swedish" class="landeflag"/> - Swedish</a></li>
    <li><a href="/tr/"><img src="/language/TR.png"  alt="Turkish" title="Turkish" class="landeflag"/> - Turkish</a></li>
    <li><a href="/en/"><img src="/language/EN.png"  alt="English" title="English" class="landeflag"/> - English</a></li>
    <li><a href="/us/"><img src="/language/US.png"  alt="American" title="American" class="landeflag"/> - American</a></li>
    </ul>
</div>

然后让 jquery 解释 div 并生成列表作为带有链接的表单选择选项。

<script>
var $sel = $("<select/>")
  .appendTo("#countryselector")
  .change(function() {
    document.location.href = $sel.val();
  })
$("#countryselector a").each(function() {
  $("<option/>")
  .appendTo($sel)
  .val(this.href)
  .html(this.innerHTML)
});
</script>

jQuery代码是我在寻找解决方案时找到的一段代码。不幸的是我不太喜欢 jQuery，所以我希望有人能引导我。

非常感谢。

Answer 1

看看这个 JSfiddle，我想这就是您所要求的。
请注意，我添加了一个空的选择字段:

<select id="country-select-input"></select>

Jquery:

$("#countryselector a").each(function() {
  $("<option/>")
  .appendTo($("#country-select-input"))
  .val(this.href)
  .html(this.innerHTML)
});

$("#country-select-input").change(function(){
    alert($(this).val())   
});

Example for Rendering form Select