选择选择框的第一项时如何使颜色变为灰色答案

【问题标题】：How do I make the color gray when the first item of the select box is selected选择选择框的第一项时如何使颜色变为灰色
【发布时间】：2021-12-16 12:09:26
【问题描述】：

我有 3 个选择框，它们都具有相同的类。在我尝试做的选择框中，如果选择了第一项，则文本颜色应为灰色，如果选择其他项，则文本颜色应为白色。

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

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

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

【问题讨论】：

标签： jquery tailwind-css

【解决方案1】：

如果你不是太依赖 JQuery，我想用 AlpineJS 提出这个解决方案。 AlpnineJS 是轻量级的 Javascript 实用框架，通常被描述为 JS 的 Tailwind。为了达到这个“简单”的结果，它的效果很好。

下面提出的解决方案基于 AlpineJS 的两个功能：x-model 和 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 :)

【讨论】：

非常感谢您的回复。项目中很多地方都用到了alpine.js，怎么没想到:)