javascript - 选择时线性渐变显示

Question

function colorPattern(){
    var color_Board = $('#colorBoard');
    var color_Pattern_box = ["red", "pink", "skyblue"];
    var color_temp = ('');

    for(var c = 0; c < color_Pattern_box.length; c++){
        color_temp += "<optgroup style='background:linear-gradient("+color_Pattern_box[c]+", #ffffff);'><option>"+color_Pattern_box[c]+"</option></optgroup>";
    }

    color_Board.html(color_temp);

    }

colorPattern();

demo

我的目的是使用线性渐变在选择上制作颜色图案，但我无法使其工作。谁能帮我看看我做错了什么？

Answer 1

向选择添加事件监听器即可:

//if you want to make the select take a default color as the first option
color_Board.css({background: color_Board.find("option:eq(0)").parent().css("background-image")});

color_Board.on('change', function(e){
   $(this).css({background: $(this).find("option:selected").parent().css("background-image") });
});

Demo