从 <select> 中提取值并将其放入数组中

Question

从 <select> 中提取值并将其放入数组中

4

当然，这不应该太难吧？

我有一个元素在一个滚动框中显示：

<select id="selectBox" name="select" size="15" style="width:190px;">  
<!-- <options> are added via javascript -->     
</select>

目前，我正在使用这段 JavaScript 来获取元素，但它没有起作用：

//Calculate all numbers
        var x=[];
    function calculate()
    {
        for (var i = 0; i < 999; i++)
        {
            x[i]=selectbox.options[i].value;
            alert(x[i]);
        }

    }

Calculate()函数被一个按钮调用。但是出现了一些严重的问题，我无法解决。之前定义的selectbox已经是var selectbox = document.getElementById("selectBox");，这个已经可以正常工作。

这里调用alert只是为了尝试调试代码...

我使用数字999，因为我不知道如何得到<select>元素中有多少个选项（因为它在滚动框格式中）。解决方案必须是JavaScript，并且列表框必须采用滚动框格式。

感谢您的帮助！

编辑——好的，下面附上更多的代码以帮助理解。

<form id="aggregateForm">
    <input id="inputNum" value="" type="text"><input id="addnum" value="Add" onclick="add();" type="button">
    <br>
    <select id="selectBox" name="select" size="15" style="width:190px;">  

    </select>
    <br>
    <input id="calculate" value="Calculate" onclick="calculate();" type="button"><input id="reset" value="Reset" onclick="reset();" type="button">
</form>

<script type="text/javascript">
    var selectbox = document.getElementById("selectBox");

    function add()
    {
    //Function to add a new number to the list of digits
    //Parses an integer to ensure everything works okay
    if(IsNumeric(document.getElementById("inputNum").value) == true)
    {
        selectbox.options[selectbox.options.length] = new Option(document.getElementById("inputNum").value, document.getElementById("inputNum").value);
        inputNum.focus();
    }
    else if(IsNumeric(document.getElementById("inputNum").value) == false)
    {
        alert("I'm sorry, but you have entered an invalid number. Please enter a number into the input box.");
        inputNum.focus();
    }
    }

    //Calculate all numbers
    var x=[];
    function calculate()
    {
    for (var i = 0; i <selectbox.options.length; i++)
        {
    x[i]=selectbox.options[i].value;
    alert(x[i]);
        }


    }

    //IsNumeric function coding taken from https://dev59.com/3nVD5IYBdhLWcg3wU56H code by Joel Coehoorn
    function IsNumeric(input)
    {
        return (input - 0) == input && input.length > 0;
    }


</script>

- Singular1ty

为什么你不想使用jQuery呢？而且将alert赋值是一个打字错误，对吧？alert=(x[i]); - Thilo

我必须使用 JavaScript（长话短说），抱歉。为什么alert是错误的？ - Singular1ty

1

jQuery 就是 Javascript。而alert(x[i])更像是你想要的。或者在循环后面加上console.log(x)。 - Thilo

哦，修复警报现在..也许它之前就在工作..？而且我必须自己用纯JavaScript进行所有编程。 - Singular1ty

不，警告仍然无法工作 - 必须是我的编码问题。 - Singular1ty

显示剩余2条评论

2个回答

1

问题在于“calculate”是元素的ID。而且奇怪的是，它认为“calculate”是DOM对象，而不是您的函数：证明。我将函数名称更改为calculates。

我上周才发现可以使用ID引用元素。

<div id="really">Yep for some reason</div>

...稍后在 JavaScript 中

// no document.getElementById, just
// let me be very clear, THIS IS WRONG TO USE VERY BAD SO EVERYONE CAN KNOW NOT TO USE THIS
// but it does work this way so be aware
really.innerHTML = "I guess he was right.";

- Joe

哇，太棒了！非常感谢！:D 我会记住的...非常感谢，那立刻就起作用了！ - Singular1ty

不要使用ID作为全局变量！！这是IE引入并被其他人复制以保持兼容性的一个非常糟糕（非标准）的功能。请不要使用它或推荐其使用。 - RobG

1

@RobG，我从来没有说过那样的话。甚至一次都没有。 - Joe

在你写的地方 "// no document.getElementById, just really.innerHTML = "I guess he was right.";。 - RobG

@RobG，因为这是默认的工作方式。需要理解这一点。 - Joe

这并不是默认的工作方式，建议在使用HTML4严格DOCTYPE时在Firefox中尝试。如果需要理解，则应该解释一下（你没有解释）。如果你解释了，我会取消踩的。 - RobG

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brian Glaz · Accepted Answer

请查看这个jsfiddle

var selectbox = document.getElementById("selectBox");

var x = [];

function calculate()
{
    for (var i = 0; i <selectbox.options.length; i++)
    {
        x[i]=selectbox.options[i].value;
        alert(x[i]);
    }

}
calculate();

这将会警报选择框中的每个选项元素。