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.
4 answers
solution1
1 2013-04-28 20:28:27
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>
solution2
0 2013-04-28 20:24:36
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
$_SESSION['language'] = $_GET['lang'] and in your jQuery
var selected_lang = '<?php echo $_SESSION["language"]; ?>';
$("select[name='lang']").val(selected_lang);
solution3
0 2013-04-28 20:27:25
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.
solution4
0 2013-04-28 20:29:09
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.