I have < select > with < option > . If I click first option I want to stay in my main page. If I click second option I want to add at the end main page /en .(It relocate me to english version of my site) On the rest options I want to go external sites. My value return me just "/" how to correctly sort it?
Thanks for any help.
window.onload = function() {
select = document.getElementById('changeLanguage');
console.log(select);
select.addEventListener("change",lan);
var value = select.options[select.selectedIndex].value;
console.log(value);
function lan(value) {
console.log('working');
if (value === "/") {
window.location.href = value;
console.log(value);
}
else if (value === "/en") {
window.location.href = value;
console.log(value);
}
else if (value === "https://ln.wikipedia.org/wiki/Espania") {
window.location.href = value;
console.log(value);
}
else if (value === "https://en.wikipedia.org/wiki/FR") {
window.location.href = value;
console.log(value);
}
else if (value === "https://en.wikipedia.org/wiki/United_Kingdom") {
window.location.href = value;
console.log(value);
}
}
};
<div class="top-bar--currency navigation--entry">
<form method="post" class="currency--form">
<div class="select-field">
<div class="js--fancy-select select-field language--select">
<select name="__currency" class="currency--select" data-auto-submit="true" id="changeLanguage" >
<option value="/">DE</option>
<option value="/en">EN</option>
<option value="https://en.wikipedia.org/wiki/United_Kingdom" data-external-link="true">UK</option>
<option value="https://en.wikipedia.org/wiki/FR" data-external-link="true">FR</option>
<option value="https://ln.wikipedia.org/wiki/Espania"data-external-link="true">ESP</option>
</select>
</div>
</div>
<input type="hidden" name="__redirect" value="1">
</form>
</div>
Change when you check the value of the select:
function lan() {
var value = select.options[select.selectedIndex].value;
console.log('working')
//do your thing here
}