Javascript 和 jQuery 都停止删除 for 循环中的选项

标签 javascript jquery

所以,我遇到了一个情况。当尝试删除其中包含连字符的内容时,下面的代码就会死掉。我找不到其他人遇到这个问题...

还有其他人遇到过这种情况吗?作为一项工作,你会做什么?

<!DOCTYPE html>
<html>
<body>

<form>
Select a fruit:
<br>
<select id="mySelect" size="4">
  <option>Apple</option>
  <option>Not-Happening</option>
  <option>Banana</option>
  <option>Orange</option>
</select>
</form>

<br>

<button onclick="myFunction()">Remove selected fruit</button>

<script>
function myFunction() {

var x = document.getElementById("mySelect");

for(i = 0; i < x.length; i++)
{
    alert(x.length);
    x.remove(i);
}
}
</script>

</body>
</html>

下面的代码...

$(".mySelect").find("option").each(function(index, el){
  var $el = $(el);
  var value != '' $el.attr("value");
  if (value === "" || value === undefined)
    $el.remove();
});

最佳答案

这不是连字符,只是你正在这样做:

for(i = 0; i < x.length; i++)
{
    alert(x.length);
    x.remove(i);
}

当您删除索引 0 处的选项时,所有其他选项都会向上移动,但您的 i 变量会移动到 1。因此,索引 1 处的选项现在位于索引 0 处,并且不会得到已删除。

如果您想将它们全部删除,请向后计数,或分配给length:

x.length = 0;

如果您只想删除选定的内容,请向后操作:

function myFunction() {
  var x = document.getElementById("mySelect");
  var i;
  for (var i = x.length - 1; i >= 0; --i) {
    if (x[i].selected) {
      x[i].remove();
    }
  }
}

示例:

function myFunction() {
  var x = document.getElementById("mySelect");
  var i;
  for (var i = x.length - 1; i >= 0; --i) {
    if (x[i].selected) {
      x[i].remove();
    }
  }
}
Select some before clicking the button.
<form>
  Select a fruit:
  <br>
  <select id="mySelect" size="4">
    <option>Apple</option>
    <option>Not-Happening</option>
    <option>Banana</option>
    <option>Orange</option>
  </select>
</form>

<br>

<button onclick="myFunction()">Remove selected fruit</button>

使用 jQuery,它更简单,因为 jQuery 是基于集合的,您可以一次将它们全部删除:

$("#mySelect option:selected").remove();

示例:

function myFunction() {
  $("#mySelect option:selected").remove();
}
Select some before clicking the button.
<form>
  Select a fruit:
  <br>
  <select id="mySelect" size="4">
    <option>Apple</option>
    <option>Not-Happening</option>
    <option>Banana</option>
    <option>Orange</option>
  </select>
</form>

<br>

<button onclick="myFunction()">Remove selected fruit</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

关于Javascript 和 jQuery 都停止删除 for 循环中的选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50197190/

相关文章:

javascript - 使用 Knex.js 和 Objection.js 连接到 Azure Postgres 数据库

javascript - Alert On input Field 在表单中点击 3 次

jquery - 我的 css 转换搜索框不工作

javascript - 使用 JavaScript 的默认单选按钮选择

javascript - 将 Excel 列映射到父子 JSON

jquery - 需要 jQuery 目标帮助的 AddClass

javascript - 向下滚动后粘性标题

javascript - jQuery 开关按钮开/关应设置不同的数据状态和 Onclick 功能

javascript - 如何在JS/jQuery中创建不同的交互模式?

javascript - Jasmine Node 选项 : Unexpected identifier error while executing protractor protractorConfig. js