How do I make the color gray when the first item of the select box is selected

Question

I have 3 selectboxes, all of them have the same class. In the selectbox I am trying to do, if the first item is selected, the text color should be gray, if the others are selected, the text color should be white.

I tried this with jquery and tailwindcss.

MY HTML CODE :

MY CSS CODE :

  [hidden] {
    display: none;
}

MY JS CODE : (JQUERY)

$(".first-child-gray-select").each((select) => {
$(select).on("change", function () {
    console.log("sea");
    if ($(select + "option:selected").hasClass("text-white")) {
        $(select).removeClass("text-gray-500");
        $(select).addClass("text-white");
    }
});
});

When I edit the code in this way, when I select the option, it changes the color of all the select boxes.

$(".first-child-gray-select").change(function () {
    if ($(".first-child-gray-select option:selected").hasClass("text-white")) {
        $(".first-child-gray-select").removeClass("text-gray-500");
        $(".first-child-gray-select").addClass("text-white");
    }
});

user_13371166 · Answer

If you're not too attached to JQuery, I'd like to propose this solution with AlpineJS. AlpnineJS is lightweight Javascript utility framework, often described as the Tailwind for JS. To achieve "simple" results as this one, it works great.

The solution proposed below builds on two functionalities of AlpineJS: x-model and x-bind


    
    
    
    Document

I've implemented a solution where the text is blue when the first option is selected and gray otherwise, play with tailwindcss classes so that it fits your need :)

How do I make the color gray when the first item of the select box is selected

1 Answers