Question

如何使用2个不同的类？当用户在第一个选择修复或另一个时，我有2个HTML选项字段。然后第二个必须出现。但它也需要一个引导类：form-control。

<script>
    $(function() {
        $("#correctiemaatregelen").on("change", function() {
            var select_val = $(this).val();
            console.log(select_val);
            if (select_val === 'Other') {
                $("#leveranciers").removeClass("hidden");
                document.getElementById("leveranciers");
            }
            else if (select_val === 'Repair') {
                $("#leveranciers").removeClass("hidden");
                document.getElementById("leveranciers");
            }
            else {
                $("#leveranciers").addClass("hidden");
                $("#leveranciers").val("");
            }
        });
    });
</script>

Correctie maatregelen:<br>
<select name="correctiemaatregelen" class="form-control" id="correctiemaatregelen" style="width: 300px">
    <option value="--Correctie maatregel--">--Correctie maatregel--</option>
    <option value="Use">Use</option>
    <option value="Repair">Repair</option>
    <option value="Return">Return</option>
    <option value="Other">Other</option>
</select>
<br>
<select name="leveranciers" id="leveranciers" class="form-control hidden" style="width: 300px">
    <?php while ($row4 = mysqli_fetch_assoc($result4)):; ?>
        <option value="<?php echo $row4['statusname'];?>"><?php echo $row4['statusname'];?></option>
    <?php endwhile;?>
</select>

有人可以帮助我解决这个（简单）问题吗？

Answer 1

您是否可以仅向元素添加另一个类？如果这引起问题，则必须使用自己的类覆盖一些Bootstrap样式

$(function() {
    $("#correctiemaatregelen").on("change", function() {
        var select_val = $(this).val();
        console.log(select_val);
        if (select_val === "Other") {
            $("#leveranciers").removeClass("hidden");
            document.getElementById("leveranciers");
        }
        else if (select_val === "Repair") {
            $("#leveranciers").removeClass("hidden");
            $('#leveranciers').addClass("YOUR_CUSTOM_CLASS");
        }
        else {
            $("#leveranciers").addClass("hidden");
            $("#leveranciers").val("");
        }
    });
});

<select name="leveranciers" id="leveranciers" class="form-control YOUR_CUSTOM_CLASS hidden" style="width: 300px">
    <?php while ($row4 = mysqli_fetch_assoc($result4)):; ?>
        <option value="<?php echo $row4['statusname'];?>"><?php echo $row4['statusname'];?></option>
    <?php endwhile;?>
</select>

如何使用bootrap类和CSS类

1 个答案: