javascript - 如果所选选项包含 HTML/JavaScript (JQuery) 中的 ID ='answer'，则从 <select> 设置类

Question

我对 HTML 和 JQuery 完全陌生，如果当前选择的选项有一个 ID="answer"，我不知道如何为我的选择元素设置一个类。我想这样做是为了检查选择题是否正确。

如果在 JQuery 中无法做到这一点，JavaScript 也可以。我只是想避免进行数据库查询，并认为 JQuery 是最佳选择。

这是我当前的 html 部分:

<form id="ansForm" class="testClass1">
    <div id="QuestionForm" name="QuestionForm">
    <label>Question 1: This is a question </label>
    <select class="form-control select-class">
        <option value="1" class="ans-class" id="answer">Answer1</option>
        <option value="2" class="ans-class">Answer2</option>
        <option value="3" class="ans-class">Answer3</option>
        <option value="4" class="ans-class">Answer4</option>
    </select>
    <label>Question 2: This is another question </label>
    <select class="form-control select-class">
        <option value="1" class="ans-class">Another Answer</option>
        <option value="2" class="ans-class">Just some text</option>
        <option value="3" class="ans-class" id="answer">Test</option>
        <option value="4" class="ans-class">Test2</option>
    </select>
    </div>
    <button type="button" class="btn btn-primary" 
    onclick="checkAnswers()">Check</button>
</form>

当我单击该按钮时，它会运行一个名为“checkAnswers()”的 Javascript 函数。
此函数应检查在下拉框中选择的选项是否具有 id="answer"。在这种情况下，如果选择了选项一。如果选择了该选项，我希望更改选择元素的背景颜色。

我将如何检查当前选择的下拉选项的 ID？我如何一次针对 1 个以上的问题执行此操作？
我如何在 JavaScript 中以编程方式向该选择元素添加一个类，以便它可以更改 BG 颜色？

这是我在 JavaScript 中尝试的:

var s = document.getElementsByClassName("select-class");
var idSelectedOption = s[s.selectedIndex].id;
alert(idSelectedOption);

但这会返回一个错误:“Uncaught TypeError: Cannot read property 'id' of undefined” 我认为那是因为它从所有类返回一个数组。我将如何去检查每一个？并更改选择了正确选项的背景颜色？

提前致谢，
垫子。

Answer 1

使用 data-* 属性代替 id，因为您不应该在文档中有多个具有相同 id 值的元素。

getElementsByClassName will return nodelist hence you need to iterate through elements and then apply conditions accordingly. Array.prototype.forEach.call is used in example below to iterate through elements.

试试这个:

function checkAnswers() {
  var s = document.getElementsByClassName("select-class");
  Array.prototype.forEach.call(s, function(elem) {
    var idSelectedOption = elem[elem.selectedIndex].getAttribute('data-id');
    if (idSelectedOption == 'answer') {
      var selectedAnswer = elem[elem.selectedIndex].getAttribute('value');
      alert(selectedAnswer);
    }
  });
}

<form id="ansForm" class="testClass1">
  <div id="QuestionForm" name="QuestionForm">
    <label>Question 1: This is a question</label>
    <select class="form-control select-class">
      <option value="1" class="ans-class" data-id="answer">Answer1</option>
      <option value="2" class="ans-class">Answer2</option>
      <option value="3" class="ans-class">Answer3</option>
      <option value="4" class="ans-class">Answer4</option>
    </select>
    <label>Question 2: This is another question</label>
    <select class="form-control select-class">
      <option value="1" class="ans-class">Another Answer</option>
      <option value="2" class="ans-class">Just some text</option>
      <option value="3" class="ans-class" data-id="answer">Test</option>
      <option value="4" class="ans-class">Test2</option>
    </select>
  </div>
  <button type="button" class="btn btn-primary" onclick="checkAnswers()">Check</button>
</form>

Fiddle here