使用 JavaScript 删除超过 1 个选择选项

Question

我有 3 列 HTML 选择字段，需要加载依赖于先前选择字段的选项。

第 2 列值中的选择将取决于第 1 列选择中的选定值。我在下面有这个原始 JavaScript，它向 HTML 选择字段添加 2 个选择选项，然后根据选择 1 中的选择值删除 2。

我的问题是，删除 2 个选择字段选项的部分并没有删除这两个选项，而是删除了其中的 1 个。

演示：http://jsfiddle.net/jasondavis/croh2nj8/3/

我意识到其中一些使用了 jQuery，但目标是在有问题的部分中使用不带 jQuery 的原始 JS....

$(document).ready(function() {

  $("#action").change(function() {

    var el = $(this) ;
    var selectAttributeEl = document.getElementById('action-attribute');

    if(el.val() === "form" ) {
        var option = document.createElement('option');
        option.text = 'Name';
        var option2 = document.createElement('option');
        option2.text = 'ActionURL';
        selectAttributeEl.add(option);
        selectAttributeEl.add(option2);

    }else if(el.val() === "link" ) {
        for (var i=0; i<selectAttributeEl.length; i++){
          if (selectAttributeEl.options[i].value == 'Name'){
             selectAttributeEl.remove(i);
          }else if(selectAttributeEl.options[i].value == 'ActionURL'){
             selectAttributeEl.remove(i);
          }
        }
    }
  });

});

Answer 1

问题出在for 循环中，您在该循环中循环了selectobject.options。当第一个if 条件为真时，您可以通过删除Name 选项来改变selectobject.options。在循环的下一次迭代中，selectobject.options[i] 现在返回 undefined。

让我们通过for循环来演示：

1. i 为 0，对应选项 ID，没有任何反应。
2. i 为 1，对应选项 Class，没有任何反应。
3. i为2，对应Name选项，if语句有效，去掉Name选项。现在selectobject.options 拥有length，共3 个。
4. i 为 3，对应于 undefined。也就是说，selectobject.options[3] 是undefined，因为循环的上一次迭代从selectobject.options 中删除了一个项目。

一种可能的解决方案，在if 和else 语句中，您可以将i 重置为i--。这是updated jsFiddle。另一种选择是向后循环selectobject.options，因为改变后面的项目不会影响计数器，因为它会移动到前面的项目。

还有其他方法可以纠正此问题，例如根据您要保留在选项中的值创建一个新的 options 数组，然后将新选项加载到 select 中。

Answer 2

正如我所说，您遇到了问题，非常简单，因为 for 循环是从索引 0 开始的，并且一直向上。删除元素时，会将其从 NodeList 的 options 中删除。我知道的最简单的方法是从节点列表的末尾开始，一直到节点号 0。

$(document).ready(function() {

  $("#action").change(function() {

    var el = $(this);

    if (el.val() === "form") {
      //$("#action-attribute").append('   <option value="Name">Name</option>');
      //$("#action-attribute").append('   <option value="ActionURL">ActionURL</option>');
      var x = document.getElementById('action-attribute');
      var option = document.createElement('option');
      option.text = 'Name';
      var option2 = document.createElement('option');
      option2.text = 'ActionURL';
      x.add(option);
      x.add(option2);

    } else if (el.val() === "link") {
      //$("#action-attribute option:last-child").remove() ; 
      var selectobject = document.getElementById("action-attribute");
      var remove_array = ['Name', 'ActionURL'];
      for (var i = selectobject.options.length - 1; i >= 0; i--) {
        if (remove_array.indexOf(selectobject.options[i].value) != -1) {
          selectobject.removeChild(selectobject.options[i]);
        }
      }
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
When :
<select id="action" name="action">
  <option value="link">Link Clicked</option>
  <option value="form">Form Submitted</option>
</select>

with:

<select id="action-attribute" name="action-attribute">
  <option>ID</option>
  <option>Class</option>
</select>

Answer 3

我可以提出不同的方法吗？与其通过删除不应该存在的元素来维护菜单的状态，不如完全删除菜单option 标签并替换。

$(document).ready(function() {
  var options = {
      link: ['ID', 'Class']
    },
    dependentMenu = document.getElementById('action-attribute');

  options.form = options.link.concat(['Name', 'ActionURL']);

  $("#action").change(function() {

    var el = $(this);

    while (dependentMenu.firstChild) {
      dependentMenu.removeChild(dependentMenu.firstChild);
    }

    options[el.val()].forEach(function(value) {
      var option = document.createElement('option');
      option.text = value;
      dependentMenu.add(option);
    });

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
When :
<select id="action" name="action">
  <option value="link">Link Clicked</option>
  <option value="form">Form Submitted</option>
</select>

with:

<select id="action-attribute" name="action-attribute">
  <option>ID</option>
  <option>Class</option>
</select>