Using a combination of a bootstrap class and a custom CSS class to enhance your website design

How do I apply two different classes? I have two HTML select fields where the user can choose either repair or another option in the first one. When the user selects one, the second field should appear. But it also needs to have a Bootstrap class: 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>

Can anyone assist me with this (simple) issue?

Answer №1

Is it possible to simply assign an additional class to the element? If this creates issues, you may need to override certain Bootstrap styles with your own custom class

$(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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

jQuery concealing selections from dropdown menus

Is there a way to use jquery sort to order dropdown list options and hide the "select" item in the dropdown? Check out my fiddle code here <select id="mySelect"> <option value="">select</option> <option value="1">a</opt ...

What causes Firefox's CPU to spike to 100% when a slideshow begins that adjusts the width and left coordinates of certain divs?

Seeking Advice I'm in need of some help with identifying whether the code I'm working on is causing high CPU usage in Firefox or if it's a bug inherent to the browser itself. The situation is getting frustrating, and I've run out of so ...

I am facing an issue where HTML is not loading images or some parts of my CSS in PHP

I've been working on connecting my website to a MySQL database using PHP. Initially, I thought I could keep the HTML and CSS the same, but after adding everything, the images on the website stopped showing up as they did before. The fonts and other el ...

Why isn't the background of the container div at the top when using multiple CSS sheets?

I am revitalizing a dull website and seeking feedback on my template design here: Check out the ideal look It's quite lovely! However, as I attempt to incorporate my background, menu, and footer elements, I seem to be experiencing issues with my con ...

Setting up a PHP email form for offline use

Here is the code I am currently working on: <?php if(isset($_POST['submit'])){ $to = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="086d65696164486d70696578646d266b6765">[email protected]</a>"; // ...

The li::before pseudo element isn't working properly

I am having issues with my UL list where the CSS class I applied is not affecting the li::before pseudo class. Here's the HTML: <ul class="my-ul"> <li>Item 1</li> <li>Item 2</li> </ul> This is the CSS I a ...

The JS content failed to load into the HTML page

I need help creating a workout tracker using two JS files. The main.js file is responsible for loading content from the second file (workoutTracker.js) into the index.html. However, I'm facing an issue where the content is not being displayed on the p ...

Tips for applying unique scss classes to a div based on a specific condition

Currently, I am developing a chat application where I want to showcase messages from one specific user on the right side of the screen while displaying messages from other users on the left side. <ion-item *ngFor="let message of messages | slice:0: ...

Is it possible to create rounded or curved top corners for a box using HTML?

I'm looking to create a card with rounded top corners and wondering if there is a way to achieve this. Currently, here is the code I have: <div id="card1"> <div id="card1i"></div> </div& ...

Using Jquery to swap out div elements and reinitialize code after selecting a menu <a href>link<</a>

I have a jQuery script that swaps out a div when a href="#1" is clicked. The same link, a href="#1", is then replaced by a href="#2" and vice versa. Here is the jQuery code: $('.child2, a[href="#1"]').hide() $('#replacepagelinks a').c ...

Automating the process of submitting a checkbox

Displayed below is a mix of HTML and JavaScript: <form method = "post" style="display: inline;" name="thisform<?php echo $employee->id; ?>"> <input type="hidden" name="user" value="<?php echo $employee->id; ?&g ...

What's the reason for the align-self: flex-end CSS property not working as expected on a flex div element?

I am trying to align the "Click me" button to the left of the div that contains it. Here is my code: render = () => { return ( <Wrapper> <Body> <span>Title</span> <Desc ...

JavaScript causing values to disappear when the page refreshes

When a user hovers over ImageButtons, I use Javascript to change the ImageUrl. However, on submitting the form, the updated ImageUrl property is not reflected in the code behind. Similarly, I also dynamically update a span tag using Javascript, but its alt ...

Incorporate Web-GL sandbox effects into an HTML webpage

I am searching for a method to showcase a Web-gl shader obtained from GLSL Sandbox on the background of an HTML page. Yet, it seems there is no simple embeddable API available. How can I accomplish this task? Can I integrate this specific Shader into an H ...

Match precisely with a specific constituent of the adjacent cell

Is there a way to accomplish this layout using tables? I'm open to suggestions, such as utilizing flexbox, if it's not possible with tables. In a table with two columns, the left column contains text while the right column holds an image and add ...

Issue with PrimeNG DataTable contextMenu alignment inside TabView

I encountered an issue with displaying a DataTable - contextMenu when it is placed within a TabView. The contextMenu was appearing off-center. However, the DataTable - contextMenu worked perfectly fine when it was not wrapped in a TabView. To address this ...

What is the process for linking HTML files to a Node.js/Express server backend?

As I delve into my school project, I have encountered a hurdle that has left me searching for a suitable solution. The project involves creating multiple HTML pages, styling them with CSS, adding functionality using JavaScript, and ultimately integrating b ...

Replacing HTML content using PHP's str_replace function

Could someone help me troubleshoot this code snippet? $str = 'di &lt;a href="http://www.cadoinpiedi.it/author/redazione-la/#C" style="color:#006699; text-decoration:none;"&gt;VARIABLE NAME&lt;/a&gt;'. '&l ...

What is the best way to ensure an image fills the entire space within a Bootstrap modal container?

I'm having some issues with my bootstrap modals that contain images. When the images are long vertically, a scrollbar appears which is not ideal. I tried to solve this by setting a max-height for the modal-content and making the modal-body (where the ...

PHP Content File for Dynamic Ajax Website

I recently came across a very informative article that discussed how to create crawlable and link-friendly AJAX websites using pushState. The author provided detailed instructions on the process, but left out a crucial detail - how to store data in a PHP f ...