How to set the correct value in a drop down list

Question

I am having trouble trying to set the correct answer from a dropdown list. What I am currently working on involves a user getting shown a question with blanks in, the user can then chose what should go in these blanks from the selection of values in the drop down.

Is there anyway I can set the correct value from the list?

I have a simple JSFiddle with a simple drop down list.

<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;
}

Thank you

This might be what you're looking for: https://stackoverflow.com/questions/12080098/dropdown-using-javascript-onchange — Ana Liza Pandac, Dec 12 '18 at 13:09

score 1 · Accepted Answer · answered Dec 12 '18 at 13:12

You need to add the "value" attribute to each item in the list. The selected answer transmits the "value" to the "button1" element. After that, you can check if this value is correct or not.

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

The text content of an option is automatically used as the value, if value isn’t explicitly specified. — misorude, Dec 12 '18 at 14:22

How to set the correct value in a drop down list

1 Answers1