HTML用更具格式的内容替换选择项

Question

我在网站上有一个选择框，用于选择网站的语言：

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<select class="w3-bar-item w3-select w3-right w3-button" onchange="if (this.value) window.location.href=this.value" style="-webkit-appearance: none;">
<option value="?&lang=lu"<?php if ($_SESSION['lang'] == "lu") echo "selected='selected'";?>>Lëtzebuergesch</option>
<option value="?&lang=en"<?php if ($_SESSION['lang'] == "en") echo "selected='selected'";?>>English</option>
<option value="?&lang=fr"<?php if ($_SESSION['lang'] == "fr") echo "selected='selected'";?>>Français</option>
<option value="?&lang=de"<?php if ($_SESSION['lang'] == "de") echo "selected='selected'";?>>Deutsch</option>
</select>

这一切都很好，但我不能按我想要的格式格式化。我想用这样的东西来代替它：

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button">Lëtzebuergesch</a>
<a href="#" class="w3-bar-item w3-button">English</a>
<a href="#" class="w3-bar-item w3-button">Français</a>
<a href="#" class="w3-bar-item w3-button">Deutsch</a>
</div>
</div>

因此，当你选择语言时，它会设置&lang，并将按钮的名称设置为所选的语言。

我希望有人能帮我。

您可以在网站右上角的此处看到正在运行的选择框：(https://elgaucho.lu/beta/)

感谢您的帮助

Andy

Answer 1

滚动查看如何进行自定义选择。你所需要的只是最后的HTML和CSS代码。其他代码只是用JS实现逻辑(我知道你用PHP实现了(。

标准HTML选择解决方案

HTML:

<select id="select">
<option value="?&lang=lu">Lëtzebuergesch</option>
<option value="?&lang=en">English</option>
<option value="?&lang=fr">Français</option>
<option value="?&lang=de">Deutsch</option>
</select>

JS:

document.addEventListener('DOMContentLoaded', function() {
const select = document.getElementById('select');
select.addEventListener('change', function() {
if (this.value) {
location.href = this.value;
}
});
// loop through select options
// and if page URL contains option value, select it
for (let i = 0; i < select.options.length; i++) {
if (location.href.includes(select.options[i].value)) {
select.value = select.options[i].value;
break;
}
}
});

自定义选择解决方案：

HTML:

<div id="my-select">
<div id="my-select-label">Lëtzebuergesch</div>
<div id="my-select-options">
<div data-value="?&lang=lu">Lëtzebuergesch</div>
<div data-value="?&lang=en">English</div>
<div data-value="?&lang=fr">Français</div>
<div data-value="?&lang=de">Deutsch</div>
</div>
</div>

CSS：

#my-select {
width: 150px;
}
#my-select:hover #my-select-options {
display: block;
}
#my-select-options {
display: none;
}
#my-select-options > div {
padding: 0.5em;
border: 1px solid black;
border-top: none;
}
#my-select-label {
margin-top: 2em;
padding: 1em;
border: 1px solid black;
}

JS:

document.addEventListener('DOMContentLoaded', function() {
const mySelectLabel = document.getElementById('my-select-label');
const mySelectOptions = document.querySelectorAll('#my-select-options > div');
for (let i = 0; i < mySelectOptions.length; i++) {
mySelectOptions[i].addEventListener('click', function() {
location.href = this.getAttribute('data-value');
});
}
for (let i = 0; i < mySelectOptions.length; i++) {
if (location.href.includes(mySelectOptions[i].getAttribute('data-value'))) {
mySelectLabel.textContent = mySelectOptions[i].textContent;
break;
}
mySelectLabel.textContent = mySelectOptions[0].textContent;
}
});

如果你有任何问题，请提问。