Question

在目前的情况下，我们的网站上有一个语言选择器，允许人们通过点击相应的标志来选择两种语言。但是，由于添加了新语言，我们希望将其更改为下拉列表，最好还包含语言名称。

这是当前代码+我的努力：

    echo "<div id='languages-container'>";
// Show the language switcher
foreach($translationController->getLanguages() as $language){
    $isSSL = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') || $_SERVER['SERVER_PORT'] == 443;
    $path = 'http'.(($isSSL) ? 's' : '').'://' . $_SERVER['HTTP_HOST'] . strip_tags($_SERVER['REQUEST_URI']);
    $path = (strpos("x".$path,'?') !== false) ? substr($path, 0, strpos($path, "?")) : $path;
    $path.= "?lang=" . $language;
    $selected = $_COOKIE['webba_translator_language'] == $language ? 'selected' : '';
    echo "<a href='{$path}'><span class='language {$language} {$selected}'></span></a>";

   }
   //15-9 Test, not working
echo "<select>
    <option><a href='{$path}'><span class='language {$language} '></span>English</option>
    <option><a href='{$path}'><span class='language {$language} '></span>Nederlands</option>
    </select>"; 


echo "</div>";

和css：

#languages-container .language {
    width: 20px;
    height: 20px;
    float: left;
    margin: 2.5px 5px;
    background-position: center center;
    background-size: cover;
}
#languages-container .language.selected {
    outline: 2px solid black;
    outline-offset: 3px;
}

.language.nl_NL {
    background-image: url('../img/lang/nl_NL.png');
}
.language.en_US {
    background-image: url('../img/lang/en_US.png');
}

这是一个WiP，所以格式在待办事项列表上.. 我的问题是：如何将标志放入下拉列表而不只是2个可点击的图标？

谢谢！

Answer 1

我的同事使用一些Javascript代码解决了这个问题：

foreach($translationController->getLanguages() as $language){
    $isSSL = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') || $_SERVER['SERVER_PORT'] == 443;
    $path = 'http'.(($isSSL) ? 's' : '').'://' . $_SERVER['HTTP_HOST'] . strip_tags($_SERVER['REQUEST_URI']);
    $path = (strpos("x".$path,'?') !== false) ? substr($path, 0, strpos($path, "?")) : $path;
    $path.= "?lang=" . $language;
    $selected = $_COOKIE['webba_translator_language'] == $language ? 'selected' : '';

    if($selected) {
        $selectedString = "<a href='" . $path . "'><span class='language " . $language . "'></span></a>";
    }
    else{
        $restLanguages[] = "<a href='" . $path . "'><span class='language " . $language . "'></span></a>";
    }
}

echo "<div dir='ltr' id='languages-container' style='display: none;'>";
echo $selectedString;

echo "<div id='languages-container-hover' style='display: none;' >";
foreach($restLanguages as $restString){
    echo $restString;
}
echo "</div>";
echo "</div>";

下拉菜单中的href和span

1 个答案: