Javascript从id下拉列表中删除<option>

时间:2015-08-02 04:09:37

标签: javascript removechild

我正在开发一个动态生成项目下拉列表的应用程序。生成的ID范围从“1”到用户输入的整数(0是为硬编码的“选择选项”保留的)。如果用户改变主意并输入较小的值,我希望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 []正确地从它的fill函数接收项目,并按预期动态地重新调整大小。它始终与totalItems具有相同的值。

optionCount正确地使用用户输入的最大值填充下拉列表,但是如果用户输入较小的值,则应该删除额外选项的部分不会执行任何操作。我已经阅读了很多类似的问题并尝试了很多不同的方法,我完全不知所措。关于我如何实现这个问题,有什么特别的错误吗?

另外,有一个明显的原因,为什么不在“for”循环之外声明我在这里做的两个变量,而内部会破坏一切?我还是javascript的新手,但这看起来很奇怪。

http://jsfiddle.net/CAlbano/s4mzssm1/是指向工作小提琴的链接。我已经包含了整个脚本的所有工作方式。相关部分接近底部,但通过这种方式,您可以看到它正在做什么。在canvas元素上运行的三个输出是arrayTotal []的最后一个单元格的值,totalItems的值和optionCount-1的值。我想要发生的是,如果optionCount变得大于totalItems,则从该列表中删除最后一个子项,直到optionCount == totalItems。

事实证明,我确实需要删除用于检测额外选项的逻辑 - 我只是不明白我被告知的内容,并且必须努力学习。

1 个答案:

答案 0 :(得分:1)

你的循环条件是

...; i < n;...

i = optionCount-1n = arrayTotal.length。当数组元素的数量较少时,您永远不会进入循环体(这是您拥有removeChild脚本的地方。