如何在选择框的第一项被选中时使颜色变灰
[英]How do I make the color gray when the first item of the select box is selected
问题描述
I have 3 selectboxes, all of them have the same class.
我有 3 个选择框，它们都有相同的类。 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.我用 jquery 和 tailwindcss 试过这个。
MY HTML CODE :我的 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>
MY CSS CODE :我的 CSS 代码：
[hidden] {
display: none;
}
MY JS CODE : (JQUERY)我的 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");
}
});
});
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");
}
});
1 个解决方案
解决方案1
0 已采纳 2021-11-02 12:23:01
If you're not too attached to JQuery, I'd like to propose this solution with AlpineJS.如果你不太喜欢 JQuery，我想用 AlpineJS 提出这个解决方案。 AlpnineJS is lightweight Javascript utility framework, often described as the Tailwind for JS. AlpnineJS是轻量级的 Javascript 实用程序框架，通常被描述为 JS 的 Tailwind。 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下面提出的解决方案建立在 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 :)我已经实现了一个解决方案，其中选择第一个选项时文本为蓝色，否则为灰色，使用 tailwindcss 类来满足您的需要:)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.