用表单(选择选项）和JavaScript更改几个DIV类

Changing several DIVs class with a form (select options) and JavaScript

本文关键字：DIV 几个 JavaScript 选择 表单 选项      更新时间：2023-09-26

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

这将适用于"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>

在Javascript中-演示

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

如果您可以使用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','');
    }
}
相关文章：