基于页面的语言下拉

时间:2016-06-13 18:05:36

标签: javascript php jquery

我有一个带语言选项的简单选择框。每个选项将根据所选语言加载不同的页面。导航有效,但我需要默认选择的项目基于页面的ID,使用PHP设置。

我已经在页面上加载了jQuery 1.12,因此可以根据需要使用该库。

<?php
    $body_id = "en";
?>

<form id="language" method="post">
    <select class="language" onchange="window.location.href=this.value">
        <option selected="selected">LANGUAGE</option>
        <option value="index-da.php">DANSK</option>
        <option value="index-de.php">DEUTSCH</option>
        <option value="index.php">ENGLISH</option>
        <option value="index-es.php">ESPA&#209;OL</option>
        <option value="index-fr.php">FRAN&#199;AIS</option>
        <option value="index-it.php">ITALIANO</option>
        <option value="index-pl.php">POLSKI</option>
    </select>
</form>

3 个答案:

答案 0 :(得分:1)

  

使用filter获取目标option元素,并根据option

的值应用条件

var $body_id = "en";
var filtered = $('.language').find('option').filter(function() {
  return this.value.split('.')[0].split('-')[1] == $body_id;
});
if (filtered.length) {
  filtered.prop('selected', true);
} else {
  $('.language').find('option[value="index.php"]').prop('selected', true);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="language" method="post">
  <select class="language" onchange="window.location.href=this.value">
    <option selected="selected">LANGUAGE</option>
    <option value="index-da.php">DANSK</option>
    <option value="index-de.php">DEUTSCH</option>
    <option value="index.php">ENGLISH</option>
    <option value="index-es.php">ESPA&#209;OL</option>
    <option value="index-fr.php">FRAN&#199;AIS</option>
    <option value="index-it.php">ITALIANO</option>
    <option value="index-pl.php">POLSKI</option>
  </select>
</form>

其他语言

var $body_id = "da";
var filtered = $('.language').find('option').filter(function() {
  return this.value.split('.')[0].split('-')[1] == $body_id;
});
if (filtered.length) {
  filtered.prop('selected', true);
} else {
  $('.language').find('option[value="index.php"]').prop('selected', true);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="language" method="post">
  <select class="language" onchange="window.location.href=this.value">
    <option selected="selected">LANGUAGE</option>
    <option value="index-da.php">DANSK</option>
    <option value="index-de.php">DEUTSCH</option>
    <option value="index.php">ENGLISH</option>
    <option value="index-es.php">ESPA&#209;OL</option>
    <option value="index-fr.php">FRAN&#199;AIS</option>
    <option value="index-it.php">ITALIANO</option>
    <option value="index-pl.php">POLSKI</option>
  </select>
</form>

答案 1 :(得分:1)

而不是在整个地方重复自己,你可以只创建一个语言数组并围绕该迭代回显模板,然后检查$_SERVER['SCRIPT_NAME']以确定它是否相等并将其设置为选中(如果是这样)。 / p>

<?php
$languages = array(
  'da' => 'DANSK',
  'de' => 'DEUTSCH',
  'en' => 'ENGLISH',
  'es' => 'ESPA&#209;OL',
  'fr' => 'FRAN&#199;AIS',
  'it' => 'ITALIANO',
  'pl' => 'POLSKI'
);
?>

<form id="language" method="post">
    <select class="language" onchange="window.location.href=this.value">
      <option selected="selected" disabled>LANGUAGE</option>

<?php
foreach ($languages as $code => $language){

  $page = "index-$code.php";

  if (basename($_SERVER['SCRIPT_NAME']) === $page)
    $selected = 'selected="selected"';
  else
    $selected = '';

  echo "<option value='$page' $selected>$language</option>".PHP_EOL;

}
?>

    </select>
</form>

答案 2 :(得分:1)

做这样的事情会更灵活:

<?php
$body_id = !empty($_POST['lang']) ? $_POST['lang'] : '';

$options = array
(
    'da' => 'Dansk',
    'de' => 'Deutsch',
    'en' => 'English',
    'es' => 'Español',
    'fr' => 'Français',
    'it' => 'Italiano',
    'pl' => 'Polski'
);
?>
<form action="<?=getenv('PHP_SELF')?>" method="post">
    <select name="lang" onchange="this.form.submit()">
        <option>Language</option>
<?php foreach ($options as $key => $val):?>
        <option value="<?=$key?>"<?=($key == $body_id ? 'selected' : '')?>><?=htmlentities($val)?></option>
<?php endforeach?>
    </select>
</form>