我正在努力做到这一点,如果用户在第一个选择框上选择了一个选项,那么第二个选择框的内容将发生变化,依此类推。包括如果用户为第一个和第二个选择选项选择了什么,它也会改变第三个选择框中的内容等等。但是,到目前为止,我遇到了一些问题。目前,如果按照每个选择框的流程正确完成,它就可以工作,但我注意到仍有一些方法可以绕过它。有没有办法隐藏除第一个以外的所有选择框,当选择第一个选项时,出现第二个选择框等等?
我这样做是不是太复杂了?有没有更简单的方法来实现同样的目标?期待您的回复。
HTML:
<!-- START OF ADDING LOCATIONS -->
<select id="select1" class="ad_inquiry_locations" value="" name="guest_pl" required>
<option value="" selected disabled>Select primary location</option>
<option value="Beloit">Beloit</option>
<option value="Concordia">Concordia</option>
<option value="Glen-Elder">Glen Elder</option>
<option value="Jewell">Jewell</option>
</select>
<!-- Start of SECOND GROUP -->
<select id="select2" class="ad_inquiry_locations" value="" name="guest_al-2">
<option value="" selected disabled>Add a location</option>
<option value="Beloit">Beloit</option>
<option value="Concordia">Concordia</option>
<option value="Glen-Elder">Glen Elder</option>
<option value="Jewell">Jewell</option>
</select>
<!-- End of SECOND GROUP -->
<!-- Start of THIRD GROUP -->
<select id="select3" class="ad_inquiry_locations" value="" name="guest_al-3">
<option value="" selected disabled>Add a location</option>
<option value="Beloit">Beloit</option>
<option value="Concordia">Concordia</option>
<option value="Glen-Elder">Glen Elder</option>
<option value="Jewell">Jewell</option>
</select>
<!-- End of THIRD GROUP -->
<!-- Start of FOURTH GROUP -->
<select id="select4" class="ad_inquiry_locations" value="" name="guest_al-4">
<option value="" selected disabled>Add a location</option>
<option value="Beloit">Beloit</option>
<option value="Concordia">Concordia</option>
<option value="Glen-Elder">Glen Elder</option>
<option value="Jewell">Jewell</option>
</select>
<!-- End of FOURTH GROUP -->
<!-- END OF ADDING LOCATIONS -->
JS:
var Lists = [
document.getElementById("select1"),
document.getElementById("select2"),
document.getElementById("select3"),
document.getElementById("select4")
],
nbLists = Lists.length;
// Binds change events to each list
for (var iList = 0; iList < nbLists; iList++) {
Lists[iList].onchange = RemoveItems(iList);
}
function RemoveItems(iList) {
return function() {
var value = [];
// Add the selected items of all previous lists including the one changed
for (var jList = 0; jList <= iList; jList++) value.push(Lists[jList].options[Lists[jList].selectedIndex].text);
// Hide in all succeeding lists these items
for (var kList = iList + 1; kList < nbLists; kList++)
HideItems(kList, value);
}
}
// Hide items selected in previous lists in all next lists
function HideItems(iList, value) {
var nbOptions = Lists[iList].options.length,
nbValues = value.length,
found;
if (nbValues === 0) return;
for (var iOption = 0; iOption < nbOptions; iOption++) {
// Find if this element is present in the previous lists
found = false;
for (var iValue = 0; iValue < nbValues; iValue++) {
if (Lists[iList].options[iOption].text === value[iValue]) {
found = true;
break;
}
}
// If found, we hide it
if (found) {
Lists[iList].options[iOption].style.display = "none";
Lists[iList].options[iOption].selected = "";
}
// else we un-hide it (in case it was previously hidden)
else
Lists[iList].options[iOption].style.display = "";
}
}
最佳答案
您可以使用 CSS。只需向它们添加特定类,即可在开头隐藏所有选择(第一个除外)。
<select id="select2" class="ad_inquiry_locations hide" value="" name="guest_al-2"> ...
同时定义 CSS 类。
.hide {
display: none;
}
现在您可以在选择一个选项后删除类,即像这样。
function RemoveItems(iList) {
return function() {
Lists[iList + 1].classList.remove('hide');
...
这只是一个原型(prototype),会导致错误,因为索引 3 + 1 不存在。因此,请根据您的需求进行调整。您还可以通过添加类 .hide
再次隐藏您的选择。
Lists[iList + 1].classList.add('hide');
...
关于javascript - 四个选择选项框根据每个选择框选项动态变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40351249/