javascript - 使用表单(选择选项)和 JavaScript 更改多个 DIV 类

Question

我想让我网站的用户通过为每个问题选择一个选项来回答问题。如果他们选择了正确的答案，他们给出正确答案的段落就会变成绿色，他们可以通过相同的过程继续回答以下问题，而无需重新加载当前页面。

这适用于“onClick”事件，但如果选择了正确的答案，然后用其他内容替换，则 DIV 会保留相同的新添加的类。这就是为什么我想使用 onSelect，它在这里不起作用......

有人可以帮助我吗？谢谢

<script language="javascript">

    function change_class1() {
        var p_l1 = document.getElementById("p_langue1");
        p_1.className = "point_langue";
    }

    function change_class2() {
        var p_l2 = document.getElementById("p_langue2");
        p_2.className = "point_langue";
    }

    function change_class3() {
        var p_l3 = document.getElementById("p_langue3");
        p_3.className = "point_langue";
    }

</script>>

<h3>QUESTIONS & ANSWERS</h3>

<div id="p_langue1">
    <p>Question 1</p>
    <select>
        <option>A</option>
        <option onselect="change_class1()">B</option>
    </select>
</div>

<div id="p_langue2">
    <p>Question 2</p>
    <select>
        <option onselect="change_class2()">A</option>
        <option>B</option>
    </select>
</div>

<div id="p_langue3">
    <p>Question 3</p>
    <select>
        <option onselect="change_class3()">A</option>
        <option>B</option>
    </select>
</div>

Answer 1

在 Javascript 中 - Demo

 <h3>QUESTIONS & ANSWERS</h3>

<div id="p_langue1">
    <p>Question 1</p>
    <select onchange="change_class('p_langue1',this.value)">
        <option>A</option>
        <option>B</option>
    </select>
</div>
<div id="p_langue2">
    <p>Question 2</p>
    <select onchange="change_class('p_langue2',this.value)">
        <option>A</option>
        <option>B</option>
    </select>
</div>
<div id="p_langue3">
    <p>Question 3</p>
    <select onchange="change_class('p_langue3',this.value)">
        <option>A</option>
        <option>B</option>
    </select>
</div>

 function change_class(selectedId, answer) {
     var selectedValue = document.getElementById(selectedId);
     if (answer == 'A') {
         selectedValue.className = "point_langue";
     } else {
         selectedValue.className = "";
     }
 }

.point_langue {
    color :green;
}