CODEWITHSUNDEEP
javascriptjqueryhtml
MazeyMazey
MazeyMazey

Reputation: 303

Build select form with jquery using a hrefs

I am trying to build a "simple" language selector that will work on using jQuery.

I am aware that I also could build it using standard HTML with a form select and , but to my understanding, building a select form with OnClick location.ref values to jump to the URL is not very SEO friendly.

The reason is that when viewing the webpage from a mobile device, I would like to trigger the e.g. iPhone Wheel selector instead of a long list.

The idea:

Having a list of countries all inside their own like this:

<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>

Then having jquery to interpret the div and generating the list as form select options with links.

<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>

The jQuery code is a piece of code I have found in my search for a solution. Unfortunately I am not that into jQuery, so I hope someone can lead me on the way.

Thanks a lot.

Upvotes: 0

Views: 90

Answers (2)

Tariq
Tariq

Reputation: 2871

Look at this JSfiddle, I suppose this is what you asked for.
Notice that I added an empty select field:

<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

Upvotes: 1

Muhammad Atif
Muhammad Atif

Reputation: 1102

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>

Upvotes: 0

Related Questions