当 select 框的第一项为 selected 时，如何使颜色变灰

Question

我有3个select盒子，它们都一样class。在我尝试做的select框中，如果第一项是selected，文本颜色应该是灰色，如果其他是selected，文本颜色应该是白色.

我用 jquery 和 tailwindcss 试过了。

我的 HTML 代码：

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

我的 CSS 代码：

  [hidden] {
    display: none;
}

我的 JS 代码：(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");
    }
});
});

当我以这种方式编辑代码时，当我 select 选项时，它会更改所有 select 框的颜色。

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

Answer 1

如果你不太喜欢JQuery，我想用AlpineJS 提出这个解决方案。 AlpnineJS 是轻量级的 Javascript 实用框架，通常被描述为 JS 的 Tailwind。要获得像这个这样的“简单”结果，效果很好。

下面提出的解决方案基于 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 类 so that it fits your need :)

当 select 框的第一项为 selected 时，如何使颜色变灰

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

jquery

tailwind-css