进行Java脚本/ jQuery测验：下拉菜单任务/离子未验证

Question

https://jsfiddle.net/boriskay/thsmdqrt/3/

In the JS code you can see that the text input questions are validated through an array of objects, but this method doesn't work for the dropdown question(the correct answer is "Botas").

How can I validate the correct answer?

Thank you in advance.

HTML:

<div id="map">
  <img src="http://www.homedepot.com/catalog/productImages/1000/eb/ebd83d8b-6e6f-4526-8dd9-e063f0ef66bd_1000.jpg">
  <form>    
    <div id="q1C"><input id="q1" type="text" /></div>
    <div id="q2C"><input id="q2" type="text" /></div>
    <div id="q3C">
            <select id="q3">
                <option value="zapantandos">Zapatandos</option>
                <option value="botas">Botas</option>
                <option value="bripantas" id="truck">Bripantas</option>
            </select>
        </div>
        <input type="submit" id="submit" value="Click When Done" />
  </form>
</div>

JAVASCRIPT/JQUERY:

var answers = {
    "q1": ["Camisas", "camisas", "CAMISAS"],
    "q2": ["Zapatos", "zapatos", "ZAPATOS"],
    "q3": ["Botas", "botas", "BOTAS"]
};

function markAnswers() {
  $("input[type='text']").each(function() {
    console.log($.inArray(this.value, answers[this.id]));

    if($.inArray(this.value, answers[this.id]) === -1) {
      $(this).parent().append("<img class='result_pic' src='https://cdn4.iconfinder.com/data/icons/geomicons/32/672366-x-128.png' />");

    } else {
      $(this).parent().append("<img class='result_pic' src='http://image.flaticon.com/icons/png/128/74/74414.png' />");
      //$("form").append("Great job!");
    }
  })
}

$("form").on("submit", function(e){
    e.preventDefault();
    markAnswers();
    $("form").append("Great job!");
});

CSS:

#q1C, 
#q2C,
#q3C{
    position: absolute;
    display:flex;
    z-index:100;
  align-items:center;
}

#q1,#q2,#q3{
  height: 20px;
  float:left;
}

#q1C{   
    margin-top: -450px;
    margin-left: 350px; 
}

#q2C{   
    margin-top: -160px;
    margin-left: 350px;
}

#q3C{   
    margin-top: -610px;
    margin-left: 475px;
}

.result_pic {
    position: relative;
  z-index:100;
  width:20px;
  height:20px;
  margin-left:5px;
}

#submit {
    height: 35px;
    font-size: 17px;
    background-color: skyblue;
}

ol {
    list-style: none;
}

Answer 1

Your .each loop is selecting this:

input[type='text']

...which will not cover the select element. Try this instead:

$("input[type='text'], select").each(function() {
  //...
});