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

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 :

 <div class="text-white grid grid-cols-2 px-4 gap-4">
            <select class="focus:outline-none focus:ring-0 border-gray-500 rounded-md bg-transparent first-child-gray-select text-gray-500" required>
                <option value="" class="bg-primary text-gray-500" disabled hidden selected>Ülke...</option>
                <option value="tr" class="bg-primary text-white">Türkiye</option>
                <option value="tr" class="bg-primary text-white">Türkiye</option>
                <option value="tr" class="bg-primary text-white">Türkiye</option>
                <option value="tr" class="bg-primary text-white">Türkiye</option>
                <option value="tr" class="bg-primary text-white">Türkiye</option>
                <option value="tr" class="bg-primary text-white">Türkiye</option>
                <option value="tr" class="bg-primary text-white">Türkiye</option>
            </select>
            <select class="focus:outline-none focus:ring-0 border-gray-500 rounded-md bg-transparent first-child-gray-select text-gray-500" required>
                <option value="" class="bg-primary text-gray-500" disabled hidden selected>Şehir...</option>
                <option value="tr" class="bg-primary text-white">Bursa</option>
                <option value="tr" class="bg-primary text-white">Bursa</option>
                <option value="tr" class="bg-primary text-white">Bursa</option>
                <option value="tr" class="bg-primary text-white">Bursa</option>
                <option value="tr" class="bg-primary text-white">Bursa</option>
                <option value="tr" class="bg-primary text-white">Bursa</option>
                <option value="tr" class="bg-primary text-white">Bursa</option>
            </select>
            <select class="focus:outline-none focus:ring-0 border-gray-500 rounded-md bg-transparent first-child-gray-select text-gray-500" required>
                <option value="" class="bg-primary text-gray-500" disabled hidden selected>İlçe...</option>
                <option value="tr" class="bg-primary text-white">İznik</option>
                <option value="tr" class="bg-primary text-white">İznik</option>
                <option value="tr" class="bg-primary text-white">İznik</option>
                <option value="tr" class="bg-primary text-white">İznik</option>
                <option value="tr" class="bg-primary text-white">İznik</option>
                <option value="tr" class="bg-primary text-white">İznik</option>
                <option value="tr" class="bg-primary text-white">İznik</option>
            </select>

</div>

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

CodePudding user response：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    <script src="//unpkg.com/alpinejs" defer></script>
</head>
<body>
    <div class="p-4">
        <div x-data="{
            select1: 's1_A',
            select2: 's2_A',
            select3: 's3_A',
        }">
            <select name="s1" id="id_s1" class="border-2 p-4 rounded-xl" x-model="select1" :class="select1 == 's1_A' ? 'text-blue-800' : 'text-gray-800'">
                <option value="s1_A" class="text-gray-800">Select 1: Option 1</option>
                <option value="s1_B" class="text-gray-800">Select 1: Option 2</option>
                <option value="s1_C" class="text-gray-800">Select 1: Option 3</option>
            </select>
            <select name="s2" id="id_s2" class="mt-4 border-2 p-4 rounded-xl" x-model="select2" :class="select2 == 's2_A' ? 'text-blue-800' : 'text-gray-800'">
                <option value="s2_A" class="text-gray-800">Select 2: Option 1</option>
                <option value="s2_B" class="text-gray-800">Select 2: Option 2</option>
                <option value="s2_C" class="text-gray-800">Select 2: Option 3</option>
            </select>
            <select name="s3" id="id_s3" class="mt-4 border-2 p-4 rounded-xl" x-model="select3" :class="select3 == 's3_A' ? 'text-blue-800' : 'text-gray-800'">
                <option value="s3_A" class="text-gray-800">Select 3: Option 1</option>
                <option value="s3_B" class="text-gray-800">Select 3: Option 2</option>
                <option value="s3_C" class="text-gray-800">Select 3: Option 3</option>
            </select>
        </div>
    </div>
</body>

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 :)