使用表单（选择选项）和 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;
}

Answer 2

如果您可以使用 jQuery，您可以更轻松地为每个选择字段处理 onchange 事件，如下所示，

$('#p_langue1').on('change', function() {
    var selectedOption = $(this).val();
    if(selectedOption === 'B') {
        $('#p_langue1').addClass('point_langue');
    } else {
        $('#p_langue1').removeClass('point_langue');
    }
});

否则你可以为 select 和 javascript 设置 'onchange' 事件，

function onSelectChange() {
    var selectedOption = document.getElementById("p_langue1").value;
    if(selectedOption === 'B') {
        document.getElementById("p_langue1").setAttribute('class','point_langue');
    } else {
        document.getElementById("p_langue1").removeAttribute('class','');
    }
}