選擇選項中的Colorpicker

Question

我有一個顏色選擇選項。

<select class="form-control"> 
 
    <option value="yellow">Yellow</option> 
 
    <option value="red">Red</option> 
 
    <option value="green">Green</option> 
 
    <option value="blue">Blue</option> 
 
</select>

但我想使他們的顏色，而不是文字。那可能嗎？

我找到了bootstrap colorpicker。但我不想讓你選擇另一種顏色。

Answer 1

嘗試<input type="color">：

<input type="color">

如果希望用戶只選擇組預定的顏色 - 你可以設置背景顏色爲您的選擇：

$('.colors option').each(function() { 
 
    $(this).css('background-color', $(this).val()); 
 
}); 
 

 
$('.colors').on('change', function() { 
 
    $(this).css('background-color', $(this).val()); 
 
});

.colors { 
 
    width: 150px; 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="colors"> 
 
    <option value="yellow"></option> 
 
    <option value="red"></option> 
 
    <option value="green"></option> 
 
    <option value="blue"></option> 
 
</select>

Answer 2

1. 使用該值或文本作爲選項的背景。
2. ，請注意該懸停的選項將變成藍色，因爲這是

$(".form-control option").each(function() { 
 

 

 
    $(this).css("background-color", $(this).val()) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="form-control"> 
 
<option ></option> 
 
    <option value="yellow">Yellow</option> 
 
    <option value="red">Red</option> 
 
    <option value="green">Green</option> 
 
    <option value="blue">Blue</option> 
 
</select>

Answer 3

你可以更改的選項標籤的背景顏色的選項的默認功能

看看這個

https://stackoverflow.com/a/12836286/8318573

Answer 4

這是你想要做什麼，

$("#form-control").change(function(){ 
 
    var color = $("option:selected", this).attr("class"); 
 
    $("#form-control").attr("class", color); 
 
});

.yellow { 
 
    background-color: yellow; 
 
} 
 
.red { 
 
    background-color: red; 
 
} 
 
.green { 
 
    background-color: green; 
 
} 
 
.blue { 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="form-control" class=""> 
 
    <option class="yellow">Yellow</option> 
 
    <option class="red">Red</option> 
 
    <option class="green">Green</option> 
 
    <option class="blue">Blue</option> 
 
</select>

沒有文字，

$("#form-control").change(function() { 
 
    var color = $("option:selected", this).attr("class"); 
 
    $("#form-control").attr("class", color); 
 
});

.yellow { 
 
    background-color: yellow; 
 
    width: 100px; 
 
    } 
 
    
 
    .red { 
 
    background-color: red; 
 
    width: 100px; 
 
    } 
 
    
 
    .green { 
 
    background-color: green; 
 
    width: 100px; 
 
    } 
 
    
 
    .blue { 
 
    background-color: blue; 
 
    width: 100px; 
 
    } 
 
    
 
    .colors { 
 
    width: 100px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="form-control" class="colors"> 
 
    <option class="yellow"></option> 
 
    <option class="red"></option> 
 
    <option class="green"></option> 
 
    <option class="blue"></option> 
 
</select>