Блог

Главная - Вопросы по программированию - Как я могу выполнить простую проверку выпадающего списка?

Как я могу выполнить простую проверку выпадающего списка?

#javascript #html #validation #drop-down-menu

#javascript #HTML #проверка #выпадающее меню

Вопрос:

Я создал «форму вопроса-ответа» в 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>

JavaScript:

 var correctnumber = 1;
var errormessage = "blabla";

function checkTrue (numTrue){        
    if (numCorrect == correctNumber){  
         alert("Correct")
    }else{
        alert(errormessage);
    }
}

Теперь я хочу, чтобы люди могли выбирать ответ из выпадающего списка. Итак, я хочу, чтобы ответы проверялись при нажатии кнопки отправки.

Итак, 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>

Итак, теперь мне нужна часть JS.

Прошу прощения, если этот вопрос задавался миллион раз до этого, поскольку я пытался найти решение, но так и не нашел его.

Заранее спасибо!

Комментарии:

1. onChange=»checkCorrect(this.value)»

2. установите атрибуты name и id для выбранного вами параметра и измените значения параметров на числовые, например: <select name="numCorrect" id="numCorrect"... <option value="1">...

3. Вы должны изменить теги и заголовок, они вводят в заблуждение, вопрос, по сути, касается проверки формы в HTML и JS, jQuery не задействован.

Ответ №1:

Вместо создания функции, которая проверяет только введенный номер, вы можете создать функцию, которая проверяет полную форму. Смотрите этот пример:

 <!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>

Некоторые замечания:

  • В коде для события onsubmit="" вы можете использовать ключевое слово this для ссылки на саму форму и передачи ее checkAnswer() функции.
  • Когда у вас есть переменная, form которая указывает на вашу HTML-форму, вы можете получить ее поля через form.elements["NAME"] , где NAME соответствует атрибуту name="" в теге HTML. Это работает для всех элементов управления, select , button input за исключением <input type="image"> .

Смотрите об этом в MDN, в частности, в нем содержится хорошая ссылка на каждый объект в HTML DOM <select> .

  • Возможно, вам все еще потребуется преобразовать value в целое число, чтобы иметь возможность сравнить его с вашим правильным ответом, вот в чем причина parseInt .
  • Этот подход можно обобщить: то, что вы хотите сделать, эквивалентно проверке формы, вы можете найти в Интернете множество библиотек и руководств, которые подробно объясняют, как это сделать; также есть много ответов, если вы знаете, что искать.

Комментарии:

1. Спасибо за ответ. Я понял все, что вы ввели (кроме нового для меня parseInt), и применил это к своему оригинальному скрипту, но, похоже, это не сработает. Когда я пытаюсь отправить ответ, он не отвечает. Я тщательно скопировал и вставил ваш ответ, все, что я сделал, это изменил «правильный ответ» на 1. И я проверил наличие ошибок, но не нашел ни одной. Итак, что я могу сделать сейчас?

2. @Kirito Я добавил полный HTML-код к ответу, работает в Firefox 30, Chrome 35, Safari 7.0.5.

3. Хорошо, я понял это. Это было просто взаимодействие с некоторыми другими кодами, которые все испортили. Еще раз спасибо.