Javascript 从 id 下拉列表中删除 <option>
Javascript removing <option> from drop-down by id
我正在开发一个动态生成项目下拉列表的应用程序。生成的 ID 范围从“1”到用户输入的整数(0 保留用于硬编码 'select option')。如果用户改变主意并输入较小的值,我希望 javascript 动态删除选项。到目前为止,一切都适用于脚本,但我似乎无法做到这一点。以下是我遇到困难的部分...顺便说一句,这是我可以构建我的实用程序中更有趣的部分之前的最后一节。
var itemSelect = document.getElementById("itemSelector");
var optionCount = itemSelect.childElementCount;
for (i = optionCount-1, n = arrayTotal.length; i < n; i++)
{
var itemSelect = document.getElementById("itemSelector");
var option = document.createElement("option");
var optionCount = itemSelect.childElementCount;
if (optionCount - 1 > totalItems)
{
for (j = optionCount, o = totalItems; o < j; j--)
{
var trash = document.getElementById("itemSelector");
trash.removeChild(trash.childNodes[j]);
}
}
else if (optionCount <= totalItems)
{
option.innerHTML = "<option> Item number"+(arrayTotal[i])+"</option>";
option.value = arrayTotal[i];
option.id = i;
itemSelect.appendChild(option);
}
}
我构建了一些调试工具来检查某些值。 arrayTotal[] 正确地从它的填充函数接收项目,并按预期动态调整大小。它始终与 totalItems 具有相同的值。
optionCount 使用用户输入的最大值正确地填充了下拉列表,但是如果用户输入较小的值则应该删除额外选项的部分什么都不做。我读过很多类似的问题并尝试了很多不同的方法,但我完全不知所措。我尝试实现它的方式有什么特别错误吗?
此外,为什么不在 "for" 循环外部和内部声明我在这里所做的两个变量会破坏一切,是否有明显的原因?我对 javascript 还是个新手,但这似乎很奇怪。
http://jsfiddle.net/CAlbano/s4mzssm1/ 是 link 到有效的 fiddle。我已经包含了整个脚本的所有工作原理。相关部分位于底部附近,但这样您就可以看到它在做什么。 canvas 元素上 运行 的三个输出是 arrayTotal[] 的最后一个单元格的值、totalItems 的值和 optionCount-1 的值。我想要发生的是,如果 optionCount 变得大于 totalItems,则从该列表中删除最后一个子项,直到 optionCount == totalItems。
事实证明,我确实需要删除检测额外选项的逻辑——我只是不明白他们告诉我的是什么,不得不努力学习。
你的循环条件是
...; i < n;...
与 i = optionCount-1
和 n = arrayTotal.length
。当数组元素的数量较少时,您永远不会进入循环体(这是您拥有 removeChild 脚本的地方。
我正在开发一个动态生成项目下拉列表的应用程序。生成的 ID 范围从“1”到用户输入的整数(0 保留用于硬编码 'select option')。如果用户改变主意并输入较小的值,我希望 javascript 动态删除选项。到目前为止,一切都适用于脚本,但我似乎无法做到这一点。以下是我遇到困难的部分...顺便说一句,这是我可以构建我的实用程序中更有趣的部分之前的最后一节。
var itemSelect = document.getElementById("itemSelector");
var optionCount = itemSelect.childElementCount;
for (i = optionCount-1, n = arrayTotal.length; i < n; i++)
{
var itemSelect = document.getElementById("itemSelector");
var option = document.createElement("option");
var optionCount = itemSelect.childElementCount;
if (optionCount - 1 > totalItems)
{
for (j = optionCount, o = totalItems; o < j; j--)
{
var trash = document.getElementById("itemSelector");
trash.removeChild(trash.childNodes[j]);
}
}
else if (optionCount <= totalItems)
{
option.innerHTML = "<option> Item number"+(arrayTotal[i])+"</option>";
option.value = arrayTotal[i];
option.id = i;
itemSelect.appendChild(option);
}
}
我构建了一些调试工具来检查某些值。 arrayTotal[] 正确地从它的填充函数接收项目,并按预期动态调整大小。它始终与 totalItems 具有相同的值。
optionCount 使用用户输入的最大值正确地填充了下拉列表,但是如果用户输入较小的值则应该删除额外选项的部分什么都不做。我读过很多类似的问题并尝试了很多不同的方法,但我完全不知所措。我尝试实现它的方式有什么特别错误吗?
此外,为什么不在 "for" 循环外部和内部声明我在这里所做的两个变量会破坏一切,是否有明显的原因?我对 javascript 还是个新手,但这似乎很奇怪。
http://jsfiddle.net/CAlbano/s4mzssm1/ 是 link 到有效的 fiddle。我已经包含了整个脚本的所有工作原理。相关部分位于底部附近,但这样您就可以看到它在做什么。 canvas 元素上 运行 的三个输出是 arrayTotal[] 的最后一个单元格的值、totalItems 的值和 optionCount-1 的值。我想要发生的是,如果 optionCount 变得大于 totalItems,则从该列表中删除最后一个子项,直到 optionCount == totalItems。
事实证明,我确实需要删除检测额外选项的逻辑——我只是不明白他们告诉我的是什么,不得不努力学习。
你的循环条件是
...; i < n;...
与 i = optionCount-1
和 n = arrayTotal.length
。当数组元素的数量较少时,您永远不会进入循环体(这是您拥有 removeChild 脚本的地方。