Select option with jQuery based on HTML lang

user_12466028 0
Viewed 211

I have a multilang page with order form and I try to add some feature to auto-select country from <select> list based on language.

Here is my HTML code:

<select name="billing_country" id="billing_country" class="country_to_state country_select select2-hidden-accessible" autocomplete="country" tabindex="-1" aria-hidden="true">
    <option value="">Land/Region auswählen&nbsp;…</option>
    <option value="CZ" selected="selected">Tschechien</option>
    <option value="FR">Frankreich</option>
    <option value="ES">Spanien</option>
    <option value="DE">Deutschland</option>
    <option value="IT">Italien</option>
</select>

And the page language inside the HTML attribute. In this case I would like to select option: value="DE":

<html lang="de-DE" class="js svg background-fixed">

This is the only one language variable that I can use.

I need to target <option> value based on HTML lang attribute.

I think it can be done with jQuery. How to do it?

html-select html jquery javascript
3 Answers
  • When the site is loaded then get the value of the lang of your site.
  • Get all your options and iterate over it.
  • Check if your sites value is included in the values of your list when yes then set the select attribute of this option to true.

window.onload = myfunction;

function myfunction() {
  let initialLang = $("html")[0].lang;
  var myOpts = $('option');
  
  for(let i = 0; i < myOpts.length; i++){
  if(initialLang.includes(myOpts[i].value)){
   myOpts[i].selected = true;
  }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="de-DE" class="js svg background-fixed">

<select name="billing_country" id="billing_country" class="country_to_state country_select select2-hidden-accessible" autocomplete="country" tabindex="-1" aria-hidden="true">
  <option value="">Land/Region auswählen&nbsp;…</option>
  <option value="CZ" selected="selected">Tschechien</option>
  <option value="FR">Frankreich</option>
  <option value="ES">Spanien</option>
  <option value="DE">Deutschland</option>
  <option value="IT">Italien</option>
</select>

user_147470390

You can get html lang attribute using jquery .attr() ,then use .val() to set select value :

Check this snippet below :

$(function(){
    var htmlLang = $("html").attr("lang") || "cz-CZ" // default value if non present ;
    var lang = htmlLang.split("-")[1];
    
    console.log(lang);
    
    $("#billing_country").val(lang);
    
})
<html lang="de-DE" class="js svg background-fixed">
<body>
<select name="billing_country" id="billing_country" class="country_to_state country_select select2-hidden-accessible" autocomplete="country" tabindex="-1" aria-hidden="true">
  <option value="">Land/Region auswählen&nbsp;…</option>
  <option value="CZ" selected="selected" >Tschechien</option>
  <option value="FR">Frankreich</option>
  <option value="ES">Spanien</option>
  <option value="DE">Deutschland</option>
  <option value="IT">Italien</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

user_29324760

try this

const lang = $("html").attr("lang").split("-")[1];
$("#billing_country option").removeAttr("selected");
$("option[value="+ lang +"]").attr("selected", true);
user_91491140
Related