selecting language from drop down menu with jquery

Question

I am jQuery beginner, I have just small problem here.. when I select language from the drop down menu the page refresh, but the drop down menu dose not show me which language I picked up..it's remain Choose Language - however the URL shows me which language I picked up, which is what I want, but not the drop down menu

for example if I choose from the drop down menu English

<script type="text/javascript">

$(document).ready(function(){

        $("form").change(function(){

            $("select[name='lang']").attr('selected','selected');
            $("form").submit();

        })

})
</script>

    </head>
    <body>

    <form action="<?php htmlentities($_SERVER['PHP_SELF']); ?>" method="get">

    <select name="lang">

        <option value="">Choose Language</option>
        <option value="English">English</option>
        <option value="Arabic">Arabic</option>
        <option value="French">French</option>

    </select>

I see the URL http://127.0.0.1/index.php?lang=english (Which what I want)

but the drop down menu remain on choose language - I just want to the drop down menu shows me the language as well.

score 1 · Answer 1 · answered Apr 28 '13 at 20:28

If you want to remeber the last language seleted then you need to use a cookie. Use the jquery cookie plugin.

//checks if the cookie has been set

if($.cookie('remember_select') != null) {

    // set the option to selected that corresponds to what the cookie is set to

    $('.select_class option[value="' + $.cookie('remember_select') + '"]').attr('selected', 'selected');

}

// when a new option is selected this is triggered

$('.select_class').change(function() {

    // new cookie is set when the option is changed

    $.cookie('remember_select', $('.select_class option:selected').val(), { expires: 90, path: '/'});

});

Here is what your select would look like:

<select class="select_class">
    <option value="1">Row 1</option>
    <option value="2">Row 2</option>
    <option value="3">Row 3</option>
</select>

I +1'd, but it looks like he's looking for an after form submit. So I think the best bet is to check for the existence of `location.query` and if so, check for the length of `lang`, and then apply the value. — Ohgodwhy, Apr 28 '13 at 20:29
thanks vector, i did't cover the jquery cookie plugin - iam just beginner, but any way i will give it a try... so i don't have to wrap the drop down menu with
, just plain select box with a class and the jquery will take care of the rest..? correct — Mohammed Allam, Apr 28 '13 at 20:34

Memolition · Answer 2 · 2013-04-28T20:45:07.863

0

Try with:

$("select[name='lang']").change(function(){
    $("form").submit();
})

and to this you can add:

<option selected disable value="">Choose Language</option>

to prevent errors in you PHP

EDIT:

$_SESSION['language'] = $_GET['lang'] and in your jQuery

var selected_lang = '<?php echo $_SESSION["language"]; ?>';
$("select[name='lang']").val(selected_lang);

edited Apr 28 '13 at 20:45

answered Apr 28 '13 at 20:24

Memolition

492
1
5
12

thanks Memolition for replying : i have tried this as well, but it seems to be the same result. the drop down menu remains on choose language... – Mohammed Allam Apr 28 '13 at 20:28
SyntaxError: unterminated string literal [Break On This Error] var selected_lang = "
– Mohammed Allam Apr 28 '13 at 21:14
make an `echo $_SESSION['language']` to see what is the value of the `php` language variable and an `console.log(selected_lang);` to see check the `jQuery` variable value – Memolition Apr 28 '13 at 21:23
cause it seems like php is not setting right the `$_SESSION['language']` variable value so try to `echo` the `$_GET['lang']` variable where you are setting the `$_SESSION['language']` variable in your php – Memolition Apr 28 '13 at 21:25
i just added onchange to check weather $_SESSION['language'] getting the value from the url and it's working i have echo the $_SESSION['language'] and it showing me a value – Mohammed Allam Apr 28 '13 at 21:31
the console.log return always french, even if i pick another language – Mohammed Allam Apr 28 '13 at 21:35
try to unset the variable `unset($_SESSION['language'])` before setting it to the ` – Memolition Apr 28 '13 at 21:58

score 0 · Answer 3 · answered Apr 28 '13 at 20:27

This needs a bit of php magic coupled with your HTML code:

PHP Code

</head>
    <body>

    <form action="<?php htmlentities($_SERVER['PHP_SELF']); ?>" method="get">

    <select name="lang">

        <option value="">Choose Language</option>
        <?php foreach(array('English','Arabic','French') as $lang) ?>
        <option value="<?php echo $lang; ?>" <?php if ($_GET['lang']==$lang) echo "selected"; ?>><? echo $lang; ?></option>
       ?>
    </select>

Explanation: The php code checks for your url and selects the appropriate option from the select list.

Tip: If you wish to have a cleaner code, place all your language values in an array and loop through it to generate your dropdown menu.

score 0 · Answer 4 · edited May 23 '17 at 11:43

Your js script must be:

$(document).ready(function(){

        $("form").change(function(){

            $("select[name='lang']").attr('selected','selected');
            $("form").submit();

        })
        var lang=getURLParameter('lang');
        if(lang!='null')
             $("select[name='lang']").prop('value',lang);

})
function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
    );
}

Link for details of getURLParameter() function: Get URL parameter with jQuery

selecting language from drop down menu with jquery

4 Answers4

EDIT: