Question

我有一个选择对象，我正在尝试更改所选选项的背景颜色。因此，当我选择“绿色”选项时，背景颜色必须更改为绿色（颜色信息将从属性data-color获取）

以下方法可行，但它不考虑属性data-color，而仅使用一种颜色（红色）。我可以使用jQuery解决方案或纯CSS。

<select id="colors" size="5" style="height:80px;width:100px">
 <option value="1" data-color="red">red</option>
 <option value="2" data-color="green">green</option>
 <option value="3" data-color="yellow" >yellow</option>
</select>

select:focus option:checked {
  background: red linear-gradient(0deg, red 0%, red 100%);
}

Answer 1

import java.util .*;

public class Main {
    public static void main(String[] args) {
        System.out.println("enter no. of values");
        Scanner sc = new Scanner(System.in);
        int size = sc.nextInt();
        String arr[] = new String[size];
        System.out.println("Enter " + size + " values");
        for (int i = 0; i < size; i++) {
            arr[i] = sc.nextLine();
        }
        System.out.println("The array is");
        for (int i = 0; i < size; i++)
            System.out.println(i + ":" + arr[i]);
    }
}

$("select#colors").change(function () {
  var $thisMenu = $(this);
  $thisMenu.children("option").css("background", "");
  var $thisOption = $thisMenu.children("option:selected");
  var color = $thisOption.data("color");
  $thisOption.css("background", "linear-gradient(0deg, "+ color +" 0%, "+ color +" 100%)");
});

这可以工作，但是在选择后会永久更改颜色。选择其他选项后，这是您想要的颜色还是丢失的颜色？

更改所选选项的背景颜色

1 个答案: