Question

我正在努力建立一个简单的＆＃34;语言选择器将使用jQuery。

我知道我也可以使用带有表单选择的标准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

Answer 2

Try This  

    <script>
    var options="";
    $("#countryselector a").each(function(){
    options +="<option value='"+$(this).attr('href')+"' >"+$(this).html()+"</option>";
    });
    $("#countryselector").after("<select id='customSelect'>"+options+"</select>");
    </script>

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

2 个答案: