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

您需要将“ value”属性添加到列表中的每个项目。所选答案将“值”传输到“ 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>

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

1 个答案: