Question

当我从下拉列表中选择一种语言时，我能够通过页面刷新成功完成此操作。但是当我想要同样没有刷新时使用ajax.it会出错。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script>
    google.load("elements", "1", {
        packages: "transliteration"
    });
</script>    

<select name="langpair" style="height:32px; padding:0;" id="langpair" size="1">
    <option value="ENGLISH">ENGLISH</option>
    <option value="AMHARIC" >AMHARIC</option>
    <option value="HINDI">HINDI</option>
</select>
<br/>
<hr>
<textarea class="form-control" maxlength="160" id="message" name="message" rows="3" placeholder="Message"></textarea>
<br/>
    <script>
           $("#langpair").change(function() {
        var data = this.value;
var options = {
                    sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
                    destinationLanguage: [google.elements.transliteration.LanguageCode[data]],
                    shortcutKey: 'ctrl+g',
                    transliterationEnabled: true
                };

                //console.log(options);

                var control = new google.elements.transliteration.TransliterationControl(options);
                control.makeTransliteratable(['message']);
    });
    </script>

Console.log（c）提供[[object Object].HINDI]。

changelanguage.php将语言名称像HINDI一样返回data

检查dis Demo链接。

请帮忙。感谢

Answer 1

实际上，你现在已经问了一个单独的问题。最初，您的问题是如何访问LanguageCode enum

的属性

您的新问题是＆＃34;现在我可以这样做，如何动态更改音译控件的目标语言？＆＃34;

您删除和重新添加textarea的方法可行，但没有必要。

Transliterate提供了一种方法：.setLanguagePair(sourceLanguage, destinationLanguage)

更高效的方法是transliterate加载元素，然后根据用户的选择动态更改语言：

var options = {
  shortcutKey: 'ctrl+g',
  transliterationEnabled: true,
  sourceLanguage: 'en',
  destinationLanguage: ['or'],// set it to anything to start, it wont be visible anyway
};
var control = new google.elements.transliteration.TransliterationControl(options);
 control.makeTransliteratable(['message']);

$("#langpair").change(function() {
  $('#message').css('display','block');
  var data = this.value;
  $("#language_name").text(data);
  var destinationLanguage = google.elements.transliteration.LanguageCode[data];
  control.setLanguagePair('en', destinationLanguage);
});

See this updated Codepen

回答原始问题

要使用变量中保存的字符串访问对象属性，可以使用对象键语法而不是点表示法。

将您的代码更改为：

var c = [google.elements.transliteration.LanguageCode[data]];

请注意，不再需要var a和var b

Answer 2

我在选择下拉列表时重新创建了textarea。现在工作正常。可能这段代码会帮助其他人。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script>
    google.load("elements", "1", {
        packages: "transliteration"
    });
</script>    
<span id="language_name"></span>
<select name="langpair" style="height:32px; padding:0;" id="langpair" size="1">
    <option value="ENGLISH">ENGLISH</option>
    <option value="AMHARIC" >AMHARIC</option>
    <option value="HINDI">HINDI</option>
</select>
<br/>
<hr>
<span id="language_area"></span>
<br/>
<script>
    $("#langpair").change(function() {
        var end = this.value;
        //document.getElementById("message").value = "";
        $("#language_area").html("");
        $.ajax({
            type: 'POST',
            async: false,
            data: {data: end},
            url: "changelanguage.php",
            success: function(data)
            {
                $("#language_area").html('<textarea class="form-control" maxlength="160" id="message" name="message" rows="3" placeholder="Message"></textarea>');
                $("#language_name").html(data);
                var options = {
                    sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
                    destinationLanguage: [google.elements.transliteration.LanguageCode[data]],
                    shortcutKey: 'ctrl+g',
                    transliterationEnabled: true
                };

                //console.log(options);

                var control = new google.elements.transliteration.TransliterationControl(options);
                control.makeTransliteratable(['message']);
            }
        });
    });
</script>

这里标识为demo。但是，如果不在每个单词之后按空格键以及粘贴文本，它就无法正常工作。

使用Google Translate处理多语言文本区域

2 个答案:

See this updated Codepen