Question

我有一个小问题

目前，我的Test.php文件中有2个选项框。当我在第一个选项中选择杠杆时，我想显示第二个选项框。到目前为止，一切都很好！但是现在我想对其应用一些CSS ... 例如引导表单控制类...

这是我的（简单）代码：

<script>
    $(function() {
        $("#corracrtieby").on("change", function() {
            var select_val = $(this).val();
            console.log(select_val);
            if (select_val === 'Leverancier') {
                $("#Klanttable").removeClass("hidden");
            }
            else {
                $("#Klanttable").addClass("hidden");
                $("#Klanttable").val("");
            }
        });
    });
</script>

Correctie maatregelen:<br>
<select name="corracrtieby" class="form-control" id="corracrtieby" style="width: 300px">
    <option value="--corracrtieby--">--corracrtieby--</option>
    <option value="Petrogas">Petrogas</option>
    <option value="Leverancier">Leverancier</option>
    <option value="Klant">Klant</option>
</select>
<br>

<select name="Klanttable" class="hidden" id="Klanttable" style="width: 300px">
    <option value="--Klanttable--">--Correctie maatregel--</option>
    <option value="Test1">Petrogas</option>
    <option value="Test2">Leverancier</option>
    <option value="Test3">Klant</option>
    <option value="Test4">Klant</option>
    <option value="Test5">Klant</option>
</select>

那么如何使我的第一个选项框与第二个选项框相同？

Answer 1

使用Jquery，您可以一次添加多个类，因此您的解决方案将是：

$(function() {
    $("#corracrtieby").on("change", function() {
        var select_val = $(this).val();
        console.log(select_val);
        if (select_val === 'Leverancier') {
            $("#Klanttable").removeClass("hidden form-control");
        }
        else {
            $("#Klanttable").addClass("hidden form-control");
            $("#Klanttable").val("");
        }
    });
});

Answer 2

<script>
    $(function() {
        $("#corracrtieby").on("change", function() {
            var select_val = $(this).val();
            console.log(select_val);
            if (select_val === 'Leverancier') {
                $("#Klanttable").removeClass("hidden form-control");
            }
            else {
                $("#Klanttable").addClass("hidden form-control");
                $("#Klanttable").val("");
            }
        });
    });
</script>

Correctie maatregelen:<br>
<select name="corracrtieby" class="form-control" id="corracrtieby" style="width: 300px">
    <option value="--corracrtieby--">--corracrtieby--</option>
    <option value="Petrogas">Petrogas</option>
    <option value="Leverancier">Leverancier</option>
    <option value="Klant">Klant</option>
</select>
<br>

<select name="Klanttable" class="hidden form-control" id="Klanttable" style="width: 300px">
    <option value="--Klanttable--">--Correctie maatregel--</option>
    <option value="Test1">Petrogas</option>
    <option value="Test2">Leverancier</option>
    <option value="Test3">Klant</option>
    <option value="Test4">Klant</option>
    <option value="Test5">Klant</option>
</select>

现在它只删除类，而不删除选项框本身……

将引导程序类添加到JS类

2 个答案: