1
This is the language select box.

<select name="lang" id="lang" browser="Indicated by the browser">
<option value="en">English</option>
<option value="fr">French</option>
<option value="ch">Chinese</option>
<option value="sp">Spain</option>`enter code here`
</select>

This is script i have written.

<script type="text/javascript">


    jQuery(document).ready(function() {

        loadBundles('en');
        jQuery('#lang').change(function() {
            var selection = jQuery('#lang option:selected').val();
            loadBundles(selection != 'browser' ? selection : null);
            jQuery('#langBrowser').empty();
            if(selection == 'browser')  {                       jQuery('#langBrowser').text('('+jQuery.i18n.browserLang()+')');
            }
        });


    });

    function loadBundles(lang) {
        jQuery.i18n.properties({
            name:'Messages', 
            path:'bundle/', 
            mode:'both',
            language:lang, 
            callback: function() {
                updateExamples();
            }
        });
    }

    function updateExamples() {
        var ex1 = 'Firstname';
        var ex2 = 'Lastname';
        var ex3 = 'Youremail';
        var ex4 = 'Reenteremail';
        var ex5 = 'Newpassword';
        var ex6 = 'Dateofbirth';
        var ex7 = 'Signup';
        var ex8 = 'Itsfreeandalwayswillbe';
        var ex9 = 'Birthlabel';
        var ex10 = 'Termslabel';
        var ex11 = 'Summarylabel';
        var ex12 = 'PersonalLabel';
        var ex13 = 'Interestlabel';
        var ex14 = 'Addlabel';
        var ex15 = 'Editlabel';
        var ex16 = 'Deletelabel';
        var spreadsheet_label = 'Spreadsheetlabel';
        var invite_google_label = 'Invitegooglelabel';
        var invite_facebook_label = 'Invitefacebooklabel';
        var upload_label = 'Uploadlabel';
        var subBut='Submit';
        var dialogTitle = 'DTitle';


        jQuery("#first_name_label").text(eval(ex1));
        jQuery("#first_name_label1").text(eval(ex1));
        jQuery("#last_name_label").text(eval(ex2));
        jQuery("#last_name_label1").text(eval(ex2));
        jQuery("#email_label").text(eval(ex3));
        jQuery("#email_label1").text(eval(ex3));
        jQuery("#reenter_email_label").text(eval(ex4));
        jQuery("#new_password_label").text(eval(ex5));
        jQuery("#date_of_birth_label").text(eval(ex6));
        jQuery("#date_of_birth_label1").text(eval(ex6));
        jQuery("#sign_up").text(eval(ex7));
        jQuery("#label1").text(eval(ex8));
        jQuery("#button").val(eval(ex7));
        jQuery("#birth_label").text(eval(ex9));
        jQuery("#terms_label").text(eval(ex10));
        jQuery("#summary_label").text(eval(ex11));
        jQuery("#personal_label").text(eval(ex12));
        jQuery("#interest_label").text(eval(ex13));
        jQuery("#add_label").text(eval(ex14));
        jQuery("#edit_label").text(eval(ex15));
        jQuery("#delete_label").text(eval(ex16));

        jQuery("#spreadsheet_label").text(eval(spreadsheet_label));
        jQuery("#invite_google_label").text(eval(invite_google_label));
        jQuery("#invite_facebook_label").text(eval(invite_facebook_label));
        jQuery("#upload_label").val(eval(upload_label));


        jQuery("#submit_button").val(eval(subBut));
        jQuery("#ui-dialog-title-dialog").text(eval(dialogTitle));


    }
  </script>

  Everything is working fine for the labels. But in the case of dynamic drop down i     got    problem. How to localize the dynamic drop down data when the user selected the   language.
 The data in the drop down is coming from the database.



 I have a language select drop down box, after selecting one language from dropdown list am able to change the text filed names and all other text in the language that is selected.

At the same time i have another dropdown, in that data is generated dynamically form the database. After the user selecting the language from dropdown list i have to change the data in this drop down list also. please suggest me if u have any idea.

Thank you.

3
  • show us what have you done? we will guide you with the rest then
    – Om3ga
    Oct 31, 2012 at 12:05
  • Do you have any requirement for specific cultures? Because I made something for localization on the client side.
    – Jeff
    Oct 31, 2012 at 12:06
  • <select name="lang" id="lang" browser="Indicated by the browser"> <option value="en">English</option> <option value="fr">French</option> <option value="ch">Chinese</option> <option value="sp">Spain</option> </select>
    – shiva
    Nov 5, 2012 at 9:15

3 Answers 3

0

I suggest you to use ajax for this issue.

You can bind ajax to first drop down and then fill secound dropdown by data which you get from back-end.

0

You can do something like this :

<select name='lang'>
<option value='eng'>Eng</option>
<option value='french'>French</option>

</select>

<!-- below div is another div whose data changes as per the language selected -->
<div id="another_div"></div>​

JS:

$("select[name='lang']").live({
change: function(e){
    var selected_lang = $("select[name='lang'] option:selected").html();

    data = {}
    data['selected_lang'] = selected_lang;
    $.ajax({
        url: "required url",
        data: data,
        success: function(res){
           $("#another_div").text(res); // if result is a direct text sent from server
            // or
            $("#another_div").text(res.content); //if result is an object with the required content present in the key 'content'
        },
        error: function(err){
            alert("error occured");                 
        }

    });        


}
 });​
0

I would use one of the many Cascading jQuery Dropdowns:

http://www.ryanmwright.com/2010/10/13/cascading-drop-down-in-jquery/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.