Hey pankajom,
Please refer below sample.
HTML
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
Source Language
</td>
<td>
<select id="ddlSource">
<option value="EN" selected="selected">English</option>
<option value="HI">Hindi</option>
</select>
</td>
<td>
</td>
<td>
Target Language
</td>
<td>
<select id="ddlTarget">
<option value="EN">English</option>
<option value="HI">Hindi</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<textarea id="txtSource" rows="10" cols="30"></textarea>
</td>
<td>
</td>
<td colspan="2">
<textarea id="txtTarget" rows="10" cols="30"></textarea>
</td>
<td>
</td>
</tr>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("#txtSource").on("keyup", function () {
var url = "https://translation.googleapis.com/language/translate/v2?key=API_Key";
url += "&source=" + $("#ddlSource").val();
url += "&target=" + $("#ddlTarget").val();
url += "&q=" + escape($("#txtSource").val());
$.support.cors = true;
$.get(url, function (data, status) {
$("#txtTarget").val(data.data.translations[0].translatedText);
})
});
</script>
Screenshot
