如何在下拉列表中设置正确的值

Question

我在尝试从下拉列表中设置正确答案时遇到问题。我目前正在处理的工作涉及向用户显示一个带有空白的问题，然后用户可以从下拉列表中选择值中选择这些空白中应该包含的内容。

无论如何我可以从列表中设置正确的值吗？

我有一个简单的JSFiddle 和一个简单的下拉列表。

<select id="button1" class="button" title="Button 1">
<option value="">--Please choose an option for the first blank--</option>
<option id="buttonText1_1" class="buttonText">1</option>
<option id="buttonText1_2" class="buttonText">2</option>
<option id="buttonText1_3" class="buttonText">3</option>
<option id="buttonText1_4" class="buttonText">4</option>
<option id="buttonText1_5" class="buttonText">5</option>
<option id="buttonText1_6" class="buttonText">6</option>
</select>

CSS：

.buttonText {
  padding: 20px;
  display: block;
}
.button {
  width: calc(100% - 4px);
  position: relative;
  margin-bottom: 20px;
  text-align: center;
  background-color: #F8F8F8;
  border: 2px solid #EAEAEA;
  border-radius: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  max-width: 500px;
  min-height: 65px !important;
}

谢谢

Answer 1

您需要为列表中的每个项目添加“值”属性。 所选答案将“值”传输到“button1”元素。之后，你可以检查这个值是否正确。

<select id="button1" class="button" title="Button 1">
  <option value="0">--Please choose an option for the first blank--</option>
  <option id="buttonText1_1" class="buttonText" value="1">1</option>
  <option id="buttonText1_2" class="buttonText" value="2">2</option>
  <option id="buttonText1_3" class="buttonText" value="3">3</option>
  <option id="buttonText1_4" class="buttonText" value="4">4</option>
  <option id="buttonText1_5" class="buttonText" value="5">5</option>
  <option id="buttonText1_6" class="buttonText" value="6">6</option>
</select>