translate.js with select而不是按钮

时间:2016-02-18 10:42:44

标签: jquery internationalization

我正在使用translate.js,而是使用了一个按钮(页面中的示例),我正在尝试使用select来更改语言选项。

小提琴:https://jsfiddle.net/tg5okdz6/

<select name="Language" class="selectpicker lang_selector" data-style="btn-primary" data-width="150px" title='Select the Language'>
    <option value="en" class="trn" data-value="en">English (EN)</option>
    <option value="pt" class="trn" data-value="pt" selected>Português (PT)</option>
</select>

无法在jsfiddle中使用translate.js,因为它没有https cdn。

感谢您提供任何帮助。

1 个答案:

答案 0 :(得分:0)

我在chrome和firefox上测试它,它工作正常。我添加了脚本删除选项的功能,因为firefox将在刷新后忽略默认选择。

<body>
<div class="container">
<div class="row">
    <div class="col-md-6">
        <p><strong><span class="trn">Step</span> </strong>: <span class="trn" data-trn-key="step">try it</span></p>
        <select name="Language" class="selectpicker lang_selector" data-style="btn-primary" data-width="150px" title='Select the Language'>
            <option value="en" class="trn" data-value="en" selected="selected">English (EN)</option>
            <option value="pt" class="trn" data-value="pt">Português (PT)</option>
        </select>
    </div>
</div>
</div>


<script>
$(function() {

    var t = {
        step: {
            en: "try it",
            pt: "experimentar"
        }
    };
    var _t = $('body').translate({lang: "en", t: t});
    var str = _t.g("translate");
    console.log(str);


    $(".lang_selector").change(function(ev) {
        var lang = $(this).find('option:selected').attr("data-value");
        _t.lang(lang);

        console.log(lang);
        ev.preventDefault();
    });

    $(window).unload(function() {
        $('select option').remove();
    });

});

</script>
</body>