i18next and JQuery doesn't work in form's drop down list

Question

I am using JQuery Mobile for a mobile website, and for localization I am using i18next. I have an issue in my form, here it is :

 <form id="form" method="POST" action="webservices/action.php">
    <select id="subject">
        <option value='0' data-i18n="contact.email" selected></option>
        <option value='1' data-i18n="contact.name"></option>
        <option value='2' data-i18n="contact.object"></option>
    </select>
</form>

The localization works fine, I have the desired text displayed. However, the first option is not displayed and it is not possible to select it (it is possible to select other options). When looking at the select object in Javascript, it seems that the correct index is selected., therfore it is a UI problem.

I don't have any problem when not using i18next.

Anyone have an idea how to fix this issue ?

Answer 1

I found a workaround. I noticed that when I sent my form and reset it, the dropdown list was correclty displayed. So after initializing i18n, I used this:

document.getElementById("form").reset();

The form is now displayed correctly.