Question

我的页面上有4个下拉列表。我试图输出一条消息，然后点击提交按钮打开一个新页面。这是基于每个下拉列表的单个值为真的条件。每个清单的所有选项都是真的。例如50p = true，在下一个框中，£2等于true，依此类推每个列表。

以下是其中一个方框的示例。其他3个框具有完全相同的名称，但只有不同的真值和假值

<input name="button" type="submit" class="main" id="button" value="Submit" onclick="submit()" />

<select name="select_box" size="1" class="main" id="select_box">
<option value="true">50p</option>
<option value="false">1p</option>
<option value="false" selected="selected">20p</option>
<option value="false">£2</option>
</select>

这是我尝试分配变量的地方。我的逻辑是，如果我可以通过获取他们的id将变量分配给下拉列表的名称我可以应用if语句，该语句将根据onclick函数给出我想要的结果，因为选择框中包含true和false值？当我运行此代码时，Javascript似乎只是确认并调用警报框而不管选项如何，就好像那里没有其他代码一样。

var a=document.getElementById("select_box");
var b=document.getElementById("select_box2");
var c=document.getElementById("select_box3");
var d=document.getElementById("select_box4");

object.onclick=submit
if (a=true,b=true,c=true,d=true)
{
alert("Correct you have won press OK for your Reward!")
document.open("Reward.html");
}
else
{
alert("Not right Please try again!");
}

另外，如何应用上述提交按钮来处理这些陈述

我为代码前半部分顶部的糟糕编辑道歉我不太确定如何编辑它所以其余的单词显示

Answer 1

在您的代码a中保留实际的select元素，当您确实希望它保持select元素的当前值时。所以改变

var a = document.getElementById("select_box");

到此：

var a = document.getElementById("select_box").value;

这会将a指定为相关下拉列表的值。只要确保你修正比较：

if (a=true

应该是

if (a === 'true'

另请注意，将下拉列表的值设置为true或false

<option value="true">50p</option>
<option value="false">1p</option>
<option value="false" selected="selected">20p</option>
<option value="false">£2</option>

将使您的服务器端代码难以处理用户实际选择的内容，因为该表单输入的唯一值将是true或false，如果为false，则您将没有知道这三个错误值中哪一个实际被选中的方式。

Answer 2

首先，要获取选择框的值，您需要执行以下操作：

var selectBox = document.getElementById("select_box");
var a = selectBox.options[selectBox.selectedIndex].value;

接下来，对于你的if语句，有些事情是错误的。首先，您使用单个等号而不是双等于比较。当选择框返回的值是字符串时，您还要将它们与布尔值进行比较。最后，您不能用逗号分隔条件。您必须指定AND或OR或其他内容。更改你的if语句，以便更像这样：

if (a == "true" && b == "true" && c == "true" && d == "true")

<小时/> 更新：以下是我认为您尝试做的一个示例：

<html>
<head>
    <script type="text/JavaScript">
        function submit()
        {
            // fill these in with the values for the correct answers
            var correctAnswers = new Array("50p", "50p", "50p", "50p");
            for (var i = 1; i <= 4; i++)
            {
                // if any of the values turn up incorrect, stop right there and go back. No need to check the rest of the values.
                if (document.getElementById("select_box"+ i).options[document.getElementById("select_box"+ i).selectedIndex].value != correctAnswers[i-1])
                {
                    alert("Not right, please try again!");
                    return;
                }
            }

            alert("Corect, you have won! Press OK for your reward!");
            document.getElementById("frmMainForm").submit();
        }
    </script>
</head>
<body>
    <form action="Reward.html" method="post" id="frmMainForm">
        <select name="select_box1" size="1" class="main" id="select_box">
            <option value="50p">50p</option>    <!-- use the actual value, not "true" or "false" -->
            <option value="1p">1p</option>
            <option value="20p" selected="selected">20p</option>
            <option value="£2">£2</option>
        </select>
        <select name="select_box2" size="1" class="main" id="select_box">
            <option value="50p">50p</option>
            <option value="1p">1p</option>
            <option value="20p" selected="selected">20p</option>
            <option value="£2">£2</option>
        </select>
        <select name="select_box3" size="1" class="main" id="select_box">
            <option value="50p">50p</option>
            <option value="1p">1p</option>
            <option value="20p" selected="selected">20p</option>
            <option value="£2">£2</option>
        </select>
        <select name="select_box4" size="1" class="main" id="select_box">
            <option value="50p">50p</option>
            <option value="1p">1p</option>
            <option value="20p" selected="selected">20p</option>
            <option value="£2">£2</option>
        </select>
        <input type="button" class="main" id="btnSubmit" onclick="submit()" value="Submit" />
    </form>
</body>
</html>

不确定这有多重要，但请记住，任何从浏览器窗口查看源代码的人都可以获得正确的答案。如果这对您来说是个问题，那么您应该将表单提交给服务器端（例如PHP，ASP，JSP等）脚本以检查您的值。

Answer 3

您的value可以是任何内容，正确的用法是<option value="50p">50p</option>然后，当您使用时

if(document.getElementById('select_box').value == '50p') {
    alert('50p was selected');
}

这将起作用

单击按钮并根据检查b中的设置值打开消息输出和新页面

3 个答案: