Javascript 如何对下拉列表进行简单验证？_Javascript_Html_Validation_Drop Down Menu

Javascript 如何对下拉列表进行简单验证？

javascript html validation drop-down-menu

Javascript 如何对下拉列表进行简单验证？,javascript,html,validation,drop-down-menu,Javascript,Html,Validation,Drop Down Menu,我用HTML制作了一个“问答表单”，并将其与Javascript链接起来，这样人们就可以用特定的数字来回答。以下是我的代码示例： HTML代码： Question 1)"ans1" 2)"ans2" 3)"ans3" 4)"ans4" <form method="POST" name="CorrectF

我用HTML制作了一个“问答表单”，并将其与Javascript链接起来，这样人们就可以用特定的数字来回答。以下是我的代码示例：

HTML代码：

<p>Question</p>
<p>1)"ans1"</p>
<p>2)"ans2"</p>
<p>3)"ans3"</p>
<p>4)"ans4"</p>
<form method="POST" name="CorrectForm" 
   onSubmit="checkCorrect(document.CorrectForm.numCorrect.value); return false;">

    <input type="text" name="numCorrect" id="numCorrect">
    <input type="Submit" name="Submit">
</form>

现在我想让人们从下拉列表中选择答案。所以我想在按下提交按钮时检查答案

所以，HTML看起来像

<p>Question</p>
<select>
    <option value="ans1">ans1</option>
    <option value="ans2">ans2</option>
    <option value="ans3">ans3</option>
    <option value="ans4">ans4</option>
</select>

问题
ans1
ans2
ans3
ans4

所以现在我需要的是JS部分

如果这个问题以前被问过一百万次，我很抱歉，因为我试图寻找一个解决方案，但没有找到

提前谢谢

您可以创建一个验证完整表单的函数，而不是创建一个只验证输入编号的函数。请参见此示例：

<!DOCTYPE html>
<html>
<head>
<title>Validation test</title>

<script>
var rightAnswer = 3;

function checkAnswer(form) {
    if (parseInt(form.elements["answer"].value) == rightAnswer) {
        alert("Correct");
    } else {
        alert("Wrong");
    }
    return false;
}
</script>

</head>
<body>

<form method="POST" onsubmit="checkAnswer(this); return false;">
    <p>Question:</p>
    <select name="answer">
        <option value="1">ans1</option>
        <option value="2">ans2</option>
        <option value="3">ans3</option>
        <option value="4">ans4</option>
    </select>
    <input type="submit">
</form>

</body>
</html>


验证试验
var rightAnswer=3；
功能检查答案（表格）{
if（parseInt（form.elements[“answer”].value）==rightAnswer）{
警惕（“正确”）；
}否则{
警惕（“错误”）；
}
返回false；
}
问题:
ans1
ans2
ans3
ans4

一些评论：

在事件
```
onsubmit=“
```
的代码中，您可以使用keywork
```
this
```
引用表单本身，并将其传递给
```
checkAnswer（）
```
函数
当变量
```
form
```
指向HTML表单时，可以通过
```
form.elements[“NAME”]
```
检索其字段，其中
```
NAME
```
与HTML标记中的属性
```
NAME=”“
```
匹配。这适用于所有控件，
```
选择
```
，
```
按钮
```
，
```
输入
```
，但
除外

关于这一点，它包含了关于HTMLDOM中每个对象的良好参考，尤其是

您可能仍然需要将
```
值
```
转换为整数，以便能够将其与正确答案进行比较，这就是
```
parseInt
```
的原因
这种方法可以推广：你想做的事情相当于表单验证，你可以在网上找到大量的库和教程，详细解释如何做；如果你知道要寻找什么，也有很多答案

onChange=“checkCorrect（this.value）”设置所选内容的名称和id属性，并将选项的值更改为数字，例如：

您应该更改标记和标题，它们会产生误导，问题本质上是关于HTML e JS中的表单验证，不涉及jQuery。感谢您的回答。我理解您键入的所有内容（除了对我来说是新的parseInt），并将其应用于我的原始脚本，但它似乎不起作用。当我试图提交答案时，它没有响应。我仔细地复制并粘贴了你的答案，我所做的只是将“正确答案”改为1。我检查了错误，但没有发现任何错误。那么我现在能做什么呢？@Kirito我在答案中添加了完整的HTML代码，适用于Firefox 30、Chrome 35、Safari 7.0.5。好的，我找到了答案。它只是与一些其他的代码相互作用，把事情搞砸了。再次感谢。
<!DOCTYPE html>
<html>
<head>
<title>Validation test</title>

<script>
var rightAnswer = 3;

function checkAnswer(form) {
    if (parseInt(form.elements["answer"].value) == rightAnswer) {
        alert("Correct");
    } else {
        alert("Wrong");
    }
    return false;
}
</script>

</head>
<body>

<form method="POST" onsubmit="checkAnswer(this); return false;">
    <p>Question:</p>
    <select name="answer">
        <option value="1">ans1</option>
        <option value="2">ans2</option>
        <option value="3">ans3</option>
        <option value="4">ans4</option>
    </select>
    <input type="submit">
</form>

</body>
</html>