切换语言select选择框的自定义设置

这里介绍对切换语言的select选择框进行的一系列自定义设置，也就是 https://res.zvo.cn/translate/demo.html 中的这个位置：

指定切换语言选择框在代码中的位置

你想在你页面什么地方显示，就吧下面这个放到哪即可。

<div id="translate"></div>

主要是这个 id=”translate” 切换语言的按钮会自动赋予这个id里面。当然你也不一定非要是div的，也可以这样

<span id="translate"></span>

另外，如果您网页中不存在任何元素的id为translate时， translate.js 会自动创建一个 <div id="translate"> 用来显示语言切换

美化切换语言按钮

可使用css来控制切换语言选择的显示位置及美观。如：

<style>
.translateSelectLanguage{
    position: absolute;
    top:100px;
    right:100px;
}
</style>

这就是控制切换语言的 <select> 标签

设定是否自动出现 select 切换语言

/*
 * 是否显示 select选择语言的选择框，true显示； false不显示。默认为true
 * 注意,这行要放到 translate.execute(); 上面
 */
translate.selectLanguageTag.show = false;
translate.execute();

使用场景，比如如果使用了:

<a href="javascript:translate.changeLanguage('english');">切换为英语</a>

这种切换方式，那么 select下拉选择的就用不到了，就可以用此方式来不显示。
当然你也可以使用css的方式来控制其不显示。比如：

<style>
#translate{
    display:none;
}
</style>

设定select切换语言所支持的语种

translate.selectLanguageTag.languages = 'english,chinese_simplified,korean';

每个语种之间用英文,分割。比如这里设置的是支持英语、简体中文、韩语 的切换。根据后端翻译服务不同，支持的语言也不同。
这里设置后，出现的切换语言的select下拉选择框中出现的语种便是这里所设置的，而不是一下出来百多个了。
具体支持哪些，可通过 http://api.zvo.cn/translate/service/20230807/language.json.html 获取 （如果您私有部署的，接口文档中将请求域名换为您自己私有部署的域名）
注意，这行要放到 translate.execute(); 上面

重新绘制 select 下拉语种下拉选择。

比如进行二次开发translate.js，手动进行了设置语种（当前页面语种） ，但是手动改动后的，在select语种选择框中并不会自动进行改变，这是就需要手动重新绘制一下 select语种选择的下拉选择框

translate.selectLanguageTag.refreshRender();

需要 translate.js v3.0.5.20240224 及更高版本

重写select点切换后触发动作

这里是select切换语言的下拉选择框，如果点开，然后选中了某个语种后，触发的动作。

translate.selectLanguageTag.selectOnChange = function(event){
    var language = event.target.value;
    translate.changeLanguage(language);
};

其中传入的 event 便是 select 值发生改动后，select 本身，可以用 console.log(event); 打印出来详细看看
注意，要放到 translate.execute(); 上面

整个重写select语言切换及HTML等

比如切换语言这里你不想用select选择框来切换，比如想使用这种形式

这种就是对切换语言进行了重写，不再采用丑爆了的 select 选择标签，而是自己写了一个弹出窗，将语言以及相应国家国旗一并显示，看上去非常美观，上档次！
重写的方式为：

//languageList 便是当前支持的能切换的语种，你可以 console.log(languageList); 打印出来看看
translate.selectLanguageTag.customUI = function(languageList){
    //select的onchange事件
    var onchange = function(event){ translate.selectLanguageTag.selectOnChange(event); }
    //创建 select 标签
    var selectLanguage = document.createElement("select"); 
    selectLanguage.id = translate.selectLanguageTag.documentId+'SelectLanguage';
    selectLanguage.className = translate.selectLanguageTag.documentId+'SelectLanguage';
    for(var i = 0; i<languageList.length; i++){
        var option = document.createElement("option"); 
        option.setAttribute("value",languageList[i].id);
        //判断 selectLanguageTag.languages 中允许使用哪些
        if(translate.selectLanguageTag.languages.length > 0){
            //设置了自定义显示的语言
            //都转小写判断
            var langs_indexof = (','+translate.selectLanguageTag.languages+',').toLowerCase();
            //console.log(langs_indexof)
            if(langs_indexof.indexOf(','+languageList[i].id.toLowerCase()+',') < 0){
                //没发现，那不显示这个语种，调出
                continue
            }
        }
        /*判断默认要选中哪个语言*/
        if(translate.to != null && typeof(translate.to) != 'undefined' && translate.to.length > 0){
            //设置了目标语言，那就进行判断显示目标语言
            if(translate.to == languageList[i].id){
                option.setAttribute("selected",'selected');
            }
        }else{
            //没设置目标语言，那默认选中当前本地的语种
            if(languageList[i].id == translate.language.getLocal()){
                option.setAttribute("selected",'selected');
            }
        }
         option.appendChild(document.createTextNode(languageList[i].name)); 
        selectLanguage.appendChild(option);
    }
    //增加 onchange 事件
    if(window.addEventListener){ // Mozilla, Netscape, Firefox 
        selectLanguage.addEventListener('change', onchange,false); 
    }else{ // IE 
        selectLanguage.attachEvent('onchange',onchange); 
    } 
    //将select加入进网页显示
    document.getElementById(translate.selectLanguageTag.documentId).appendChild(selectLanguage);    
}

注意，要放到 translate.execute(); 上面

其中，这个方法传入的 languageList 参数，便是当前支持的能切换的语种，你可以 console.log(languageList); 打印出来看看。 而且如果你采用不同的翻译通道，这个支持的语种数量也是不一样的。
不同的翻译通道支持的语种数量可以点此查看
上面代码便是当前 translate.js 中输出 select 语言选择的代码，你可以改成任何你自己想要的效果。

需要 translate.js v3.2.4.20240424 及更高版本