Say we have a basic web page.
<html>
<head>
</head>
<body>
<h1>My Website</h1>
<p>My English Text</p>
<h1>My Japanese Website</h1>
<p>My Japanese Text</p>
</body>
</html>
We want the English stuff to show up by default, and we want a dropdown menu to let us select Japanese, and for that to hide the English and show the Japanese.
First let's make the dropdown.
<select id="language-select">
<option value="en">English</option>
<option value="jp">日本語</option>
</select>
select is the HTML tag to create a dropdown menu. The option tags just create options inside that. The value is just the name of the option.
We're going to insert it into the top of the <body> so it loads early on.
<html>
<head>
</head>
<body>
<select id="language-select">
<option value="en">English</option>
<option value="jp">日本語</option>
</select>
<h1>My Website</h1>
<p>My English Text</p>
<h1>My Japanese Website</h1>
<p>My Japanese Text</p>
</body>
</html>
Now we'll write the actual code. Since we're using the jQuery library for Javascript, we need to add <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> to the <head>.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<select id="language-select">
<option value="en">English</option>
<option value="jp">日本語</option>
</select>
<h1>My Website</h1>
<p>My English Text</p>
<h1>My Japanese Website</h1>
<p>My Japanese Text</p>
</body>
</html>
This just tells the browser to load the jQuery library and let the page use it when needed.
The actual code is fairly self explanatory. We have an opener, $('#language-select').change(function(). This listens for changes happening to something with the id language-select, which is the id we gave to our dropdown menu.
The line const selectedLanguage = $(this.val(); creates a variable called selectedLanguage if it doesn't already exist, and assigns it the value of whatever the id of the dropdown menu item selected is. Eg, jp.
$('.language').hide(); hides anything with the class language.
Finally, $(`.language[lang="${selectedLanguage}"]`).show(); shows everything with the same lang value as stored in selectedLanguage.
Put them together and we get:
$('#language-select').change(function() {
const selectedLanguage = $(this).val();
$('.language').hide();
$(`.language[lang="${selectedLanguage}"]`).show();
});
Now we're going to insert this into the very bottom of the <body>. This is best-practice for scripts, since HTML pages loads from top to bottom. If the script loaded first, it could wind up looking for something that hasn't loaded yet, which might lead to errors. This code doesn't need to worry about that, but still.
As it's a script, it needs to be surrounded by a <script> tag.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<select id="language-select">
<option value="en">English</option>
<option value="jp">日本語</option>
</select>
<h1>My Website</h1>
<p>My English Text</p>
<h1>My Japanese Website</h1>
<p>My Japanese Text</p>
<script>
$('#language-select').change(function() {
const selectedLanguage = $(this).val();
$('.language').hide();
$(`.language[lang="${selectedLanguage}"]`).show();
});
</script>
</body>
</html>
We have the dropdown and we have the code, but you'll see that the code is looking for things with ids and classes we've not created yet. So let's make them. I'm going to use <div> tags for this but really use whatever works best for your site.
All we're doing is surrounding the English text with a div with a lang value of en and a class of language, both of which are what the code is looking for.
The div looks like: <div lang="en" class="language">.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<select id="language-select">
<option value="en">English</option>
<option value="jp">日本語</option>
</select>
<div lang="en" class="language">
<h1>My Website</h1>
<p>My English Text</p>
</div>
<h1>My Japanese Website</h1>
<p>My Japanese Text</p>
<script>
$('#language-select').change(function() {
const selectedLanguage = $(this).val();
$('.language').hide();
$(`.language[lang="${selectedLanguage}"]`).show();
});
</script>
</body>
</html>
Indenting just makes it easier to follow.
For the Japanese div it's the exact same, except we also add an inline style:
<div lang="jp" class="language" style="display:none;">
This means that the text within the jp div is hidden until it needs to be shown.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<select id="language-select">
<option value="en">English</option>
<option value="jp">日本語</option>
</select>
<div lang="en" class="language">
<h1>My Website</h1>
<p>My English Text</p>
</div>
<div lang="jp" class="language" style="display:none;">
<h1>My Japanese Website</h1>
<p>My Japanese Text</p>
</div>
<script>
$('#language-select').change(function() {
const selectedLanguage = $(this).val();
$('.language').hide();
$(`.language[lang="${selectedLanguage}"]`).show();
});
</script>
</body>
</html>
And that's it. The dropdown now shows the language you want and hides the others. To add more languages, just add an entry to the <select> and then surround the text with more <divs> with the correct lang values and class="language".
You can position the dropdown menu using CSS. To get mine in the top right, into the style.css file I put:
select {
position: absolute;
top: 0;
right: 0;
}
The values top:0; and right:0 place it at the very top right of the screen, no matter what the size of screen. position: absolute; means that no space is created around the dropdown, that is, it can be placed on top of other elements.
This isn't great since any other dropdowns, as they're all called with <select> tags, will now go in the exact same place. To fix this add class="xyz" inside the <select> like we did with the divs, and then in the CSS style it as:
.xyz {
styles you want here
}