四个 select 选项框根据每个 select 框选项动态变化

Question

我试图做到这一点，如果用户 select 在第一个 select 框上选择了一个选项，那么第二个 select 框的内容将发生变化，依此类推.包括如果第一个和第二个 select 选项的用户 select 是什么，它也会更改第三个 select 框中的内容，依此类推。但是，就目前为止，我运行遇到了一些问题。目前，如果按照每个 select 框的流程正确完成，它就可以工作，但我注意到仍有一些方法可以绕过它。有没有办法隐藏除第一个以外的所有 select 框，并且当第一个选项被 selected 时，第二个 select 框出现等等？

我是不是把这条路搞复杂了？有没有更简单的方法来实现同样的目标？期待您的回复。

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 = "";
  }
}

Answer 1

您可以使用 CSS。只需向它们添加特定的 class 即可隐藏开头的所有选择（第一个除外）。

<select id="select2" class="ad_inquiry_locations hide" value="" name="guest_al-2"> ...

同时定义 CSS class.

.hide {
  display: none;
}

现在您可以在选择一个选项后删除 class，即像这样。

function RemoveItems(iList) {
  return function() {
    Lists[iList + 1].classList.remove('hide');
    ...

这只是一个原型，会导致错误，因为索引 3 + 1 不存在。因此，请根据您的需求进行调整。您还可以通过添加 class .hide.

再次隐藏您的选择

Lists[iList + 1].classList.add('hide');
...

Demo

四个 select 选项框根据每个 select 框选项动态变化

Four select option boxes dynamically change upon each select box option

html

javascript

css

jquery

jquery-selectbox