时间戳

首页 > 解决方案 > 使用基于 HTML 语言的 jQuery 选择选项

javascript - 使用基于 HTML 语言的 jQuery 选择选项

问题描述

我有一个带有订单的多语言页面，我尝试添加一些功能以<select>根据语言从列表中自动选择国家。

这是我的 HTML 代码：

<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;…&lt;/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>

以及 HTML 属性里面的页面语言。在这种情况下，我想选择选项value="DE"：：

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

这是我可以使用的唯一一种语言变量。

我需要<option>基于 HTMLlang属性来定位值。

我认为它可以用 jQuery 来完成。怎么做？

标签： javascripthtmljqueryhtml-select

解决方案

  • 加载站点后，获取站点语言的值。
  • 获取所有选项并对其进行迭代。
  • 检查您的站点值是否包含在列表的值中，如果是，然后将此选项的选择属性设置为 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;…&lt;/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>

推荐阅读