添加/删除选择框jquery javascript

Question

用户选择第一个选项，第二个选择框出现等等（让这个工作）但无法弄清楚如何添加“remove_location”类 - “remove_location”类只删除最后出现的最后一个选择框

所以我的问题是：如何“添加”“remove_location”类，如果单击此类，最后一个选择框将消失（变为不存在）。

演示：https://jsfiddle.net/g8bwurvq/

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 hide_location" 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 hide_location" 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 hide_location" 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() {
    Lists[iList + 1].classList.remove('hide_location');
    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：

.hide_location {
  display: none;
}
.remove_location {
  width: 100px;
  height: 40px;
  padding: 0;
  margin: 0;
  float: left;
  background: blue;
  cursor: pointer;
}

Answer 1

重做您的HTML和Javascript，如下所示：

从

更改您的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() {
    Lists[iList + 1].classList.remove('hide_location');
    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 = "";
  }
}

要

$(document).on('change', '.ad_inquiry_locations', function() {
  $(this).next('select, button').remove();
  var select = $('<select />', {
    'class': 'ad_inquiry_locations',
    value: "",
    name: "guest_al-2"
  });
  var option = $('<option />', {
    text: 'Add a location',
    disabled: 'disabled'
  });
  var button = $('<button />', {
    text: 'Remove Location',
    click: function() {
      $(this).prev().remove()
      if ($('.ad_inquiry_locations').length == 1) $(this).remove();
    }
  });

  select.append(option, $('option:not(:selected):not(:first)', this).clone(true));

  $(this).after(select);
  select.after(button);
});

从

更改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 hide_location" 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 hide_location" 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 hide_location" 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 -->

要

<!-- 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>
<!-- END OF ADDING LOCATIONS -->

你可以摆脱你所拥有的小CSS，因为它不再适用。

最后，这里的 DEMO 一切正常。