Giorgio Giorgio - 4 months ago 8
jQuery Question

On my drop down menu I don't want the whole extension to change on the url?

Hello I'm making a language drop down menu for my website. It works perfectly fine as you can see but the issue I am having is that I do not want index.html to be replaced once I select a different language. So if you save the HTML & JQuery, what happens when you first load up the toolbar is

C:/Users/[your name]/Desktop/Drop_Down/index.html

But if I switch the language to French for example that "index.html" disappears and will turn into

C:/Users/[your name]/Desktop/Drop_Down/&locale=fr_FR

What my goal is trying to aim for is not having that index.html disappear, e.g.

C:/Users/[your name]/Desktop/Drop_Down/index.html&locale=fr_FR

If anyone can help me that'll be wonderful, I'm just learning how to do this by self teaching myself. Thanks everyone! (I also have css code but I didn't include it because it's a style sheet and doesn't affect the function of the website)

$(document).ready(function() {

// --- language dropdown --- //

// turn select into dl

var $dropTrigger = $(".dropdown dt a");
var $languageList = $(".dropdown dd ul");

// open and close list when button is clicked
$dropTrigger.toggle(function() {
}, function() {

// close list when anywhere else on the screen is clicked
$(document).on('click', function(e) {
var $clicked = $(;
if (! $clicked.parents().hasClass("dropdown"))

// when a language is clicked, make the selection and then hide the list
$(".dropdown dd ul li a").click(function() {
var clickedValue = $(this).parent().attr("class");
var clickedTitle = $(this).find("em").html();
$("#target dt").removeClass().addClass(clickedValue);
$("#target dt em").html(clickedTitle);

// actual function to transform select to definition list
function createDropDown(){
var $form = $("div#country-select form");
var source = $("#country-options");
var selected = source.find("option:selected");
var options = $("option", source);
$("#country-select").append('<dl id="target" class="dropdown"></dl>')
$("#target").append('<dt class="' + selected.val() + '"><a href="#"><span class="flag"></span><em>' + selected.text() + '</em></a></dt>')
$("#target dd ul").append('<li class="' + $(this).val() + '"><a href="' + $(this).attr("title") + '"><span class="flag"></span><em>' + $(this).text() + '</em></a></li>');

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>My Website toolbar</title>
<link rel="stylesheet" href="languageswitcher.css">
<div id="country-select">
<form action="server-side-script.php">
<select id="country-options" name="country-options">
<option selected="selected" title="&locale=en_US" value="us">English(US)</option>
<option title="&locale=en_GB" value="gb">English(UK)</option>
<option title="&locale=bg_BG" value="bg">Bulgarian</option>
<option title="&locale=cs_CS" value="cs">Czech</option>
<option title="&locale=da_DK" value="dk">Danish</option>
<option title="&locale=de_DE" value="de">German</option>
<option title="&locale=ek_GR" value="gr">Greek</option>
<option title="&locale=es_ES" value="es">Spanish</option>
<option title="&locale=et_ET" value="et">Estonian</option>
<option title="&locale=fi_FI" value="fi">Finnish</option>
<option title="&locale=fr_FR" value="fr">French</option>
<option title="&locale=hu_HU" value="hu">Hungarian</option>
<option title="&locale=it_IT" value="it">Italian</option>
<option title="&locale=lt_LT" value="lt">Lithuanian</option>
<option title="&locale=lv_LV" value="lv">Latvian</option>
<option title="&locale=nl_NL" value="nl">Dutch</option>
<option title="&locale=no_NO" value="no">Norwegian</option>
<option title="&locale=pl_PL" value="pl">Polish</option>
<option title="&locale=pt_PT" value="pt">Portugese</option>
<option title="&locale=ro_RO" value="ro">Romanian</option>
<option title="&locale=sk_SK" value="sk">Slovak</option>
<option title="&locale=sl_SL" value="sl">Slovenian</option>
<option title="&locale=sv_SE" value="se">Swedish</option>
<input value="Select" type="submit" />
<script src="jquery_1.5.min.js"></script>
<script src="languageswitcher.js"></script>


change &locale=sl_SL to ?locale=sl_SL

replace all & with ? or make it index.html?locale=sv_SE

Essentially, a query string should start with a question mark and not an ampersand.