Создать форму выбора с помощью jquery с помощью hrefs

Question

Я пытаюсь создать «простой» язык, который будет работать с использованием 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>