[英]How to apply background-color to a selected option?
I'm writing a dropdown menu with several options and their colors.我正在编写一个包含多个选项及其颜色的下拉菜单。 I have successfully colored the background of each option;
我已经成功地为每个选项的背景着色; however, once selected that background color doesn't show.
但是,一旦选择该背景颜色就不会显示。
Is there a way to change this behavior?有没有办法改变这种行为? Example of my HTML below:
下面是我的 HTML 示例:
<select>
<option style="background-color: green">Successful</option>
<option style="background-color: orange">Process Failure</option>
<option style="background-color: purple">Abandoned</option>
</select>
or also here: http://jsfiddle.net/H8HVm/1/ .或者也在这里: http : //jsfiddle.net/H8HVm/1/ 。
You can use jQuery to read the class
of the selected option
then set that class
as the class
of the <select>
.您可以使用 jQuery 读取所选
option
的class
,然后将该class
设置为<select>
的class
。 Here is the code, followed by a fiddle:这是代码,然后是一个小提琴:
$("#color_me").change(function(){ var color = $("option:selected", this).attr("class"); $("#color_me").attr("class", color); });
.green { background-color: green; } .orange { background-color: orange; } .pink { background-color: pink; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="color_me" class=""> <option class="green">successful</option> <option class="orange">process failure</option> <option class="pink">abandoned</option> </select>
Here's the JSFiddle: http://jsfiddle.net/DrydenLong/3QUN6/这是 JSFiddle: http : //jsfiddle.net/DrydenLong/3QUN6/
Per request, here is a breakdown of my code above:根据请求,这里是我上面代码的细分:
$("#color_me").change(function(){
This line calls function when the element with the id
of "color_me" is changed.当
id
为“color_me”的元素改变时,这一行调用函数。 ie an option from the select list is chosen.即从选择列表中选择一个选项。
var color = $("option:selected", this).attr("class");
This defines the variable color
as whatever the class
of the current selected option
is.这将变量
color
定义为当前所选option
的class
。 The this
variable is referring to the DOM element we referenced in the first line. this
变量指的是我们在第一行中引用的 DOM 元素。 Basically this
ensures that we are getting the class from the correct <select>
ie the <select>
we just clicked on.基本上,
this
确保我们从正确的<select>
获取类,即我们刚刚单击的<select>
。
$("#color_me").attr("class", color);
});
This line assigns the color
variable defined above as the class
of the element with the id
of #color_me
.这一行将上面定义的
color
变量分配为具有#color_me
id
的元素的class
。
var x, i, j, selElmnt, a, b, c; x = document.getElementsByClassName("tt-select"); for (i = 0; i < x.length; i++) { selElmnt = x[i].getElementsByTagName("select")[0]; a = document.createElement("DIV"); a.setAttribute("class", "select-selected"); a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML; x[i].appendChild(a); b = document.createElement("DIV"); b.setAttribute("class", "select-items select-hide"); for (j = 0; j < selElmnt.length; j++) { /*for each option in the original select element, create a new DIV that will act as an option item:*/ c = document.createElement("DIV"); c.innerHTML = selElmnt.options[j].innerHTML; c.addEventListener("click", function(e) { var y, i, k, s, h; s = this.parentNode.parentNode.getElementsByTagName("select")[0]; h = this.parentNode.previousSibling; for (i = 0; i < s.length; i++) { if (s.options[i].innerHTML == this.innerHTML) { s.selectedIndex = i; h.innerHTML = this.innerHTML; y = this.parentNode.getElementsByClassName("same-as-selected"); for (k = 0; k < y.length; k++) { y[k].removeAttribute("class"); } this.setAttribute("class", "same-as-selected"); break; } } h.click(); }); b.appendChild(c); } x[i].appendChild(b); a.addEventListener("click", function(e) { e.stopPropagation(); closeAllSelect(this); this.nextSibling.classList.toggle("select-hide"); this.classList.toggle("select-arrow-active"); }); } function closeAllSelect(elmnt) { var x, y, i, arrNo = []; x = document.getElementsByClassName("select-items"); y = document.getElementsByClassName("select-selected"); for (i = 0; i < y.length; i++) { if (elmnt == y[i]) { arrNo.push(i) } else { y[i].classList.remove("select-arrow-active"); } } for (i = 0; i < x.length; i++) { if (arrNo.indexOf(i)) { x[i].classList.add("select-hide"); } } } document.addEventListener("click", closeAllSelect);
.tt-select { position: relative; height: auto; padding: 0px; margin-bottom: 30px; text-align: left; } .tt-select select { display: none; } .select-selected { background-color: #fff; color: rgba(0, 0, 0, 0.8) !important; } .select-selected:after { position: absolute; content: ""; top: 14px; right: 10px; width: 0; height: 0; border: 6px solid transparent; } .select-selected:before { position: absolute; content: ""; top: 18px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: transparent transparent #000000 transparent; transform: rotate(180deg); } .select-selected.select-arrow-active:before { border: none; } .select-selected.select-arrow-active:after { border-color: transparent transparent #000000 transparent; top: 10px; } .select-items div,.select-selected { color: #ffffff; padding: 8px 16px; border: 1px solid #333333; cursor: pointer; } .select-items { position: absolute; background-color: #313131; top: 100%; left: 0; right: 0; z-index: 99; } .select-hide { display: none; } .select-items div:hover, .same-as-selected { background-color: rgba(0, 0, 0, 0.1); }
<div class="tt-select"> <select> <option value="0">Options</option> <option value="1">Option One</option> <option value="2">Option Two</option> <option value="3">Option Three</option> <option value="4">Option Four</option> </select> </div>
Here is a CodePen link .这是一个CodePen 链接。
This code works for me:这段代码对我有用:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("select").change(function(){
var color = $("option:selected", this).attr("class");
$(this).attr("class", color);
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.