如何在 JSF 中选择条目时更改 <h：selectOneMenu> 下拉菜单的颜色？

Question

这是一个示例代码：

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">
<script type="text/javascript" src="js/DataTable.js"></script>
<h:body>
<h:selectOneMenu value="test1"
styleClass="combobox" id="profileID"> 
<f:selectItem itemLabel="--Select--" itemValue="--Select--"/>
<f:selectItem itemLabel="Yes" itemValue="Yes"/>
<f:selectItem itemLabel="No" itemValue="No"/>
</h:selectOneMenu>
</h:body>
</ui:composition>

现在，当我选择一个选项时，我希望最小化的下拉菜单矩形改变它的背景色，突出显示所选的选项。如果我选择"是"，矩形应变为"绿色"，如果我选择了"否"，矩形应该变为"红色"。如何实现这一点？

Answer 1

您可以保留data-*属性来存储所选选项的color值。

document.getElementById('cars').addEventListener('change', function() {
  var bgColor = this.options[this.options.selectedIndex].dataset.color;
  this.style.backgroundColor = bgColor;
  [].forEach.call(this.options, function(option) {
    option.style.backgroundColor = 'white'; //As options will inherit backgroundColor from parent `select`, do set it as `#fff` after every onchange
  });
  this.options[this.options.selectedIndex].style.backgroundColor = bgColor; //If you want selected color of `data-color`
});

<select id="cars">
  <option data-color="green" value="volvo">Volvo</option>
  <option data-color="green" value="saab">Saab</option>
  <option data-color="pink" value="opel">Opel</option>
  <option data-color="blue" value="audi">Audi</option>
</select>

Answer 2

这应该做到：

$('select').change(function(){
  if (this.value == 'volvo') {
    $(this).css('background','lime');
  }
  if (this.value == 'saab') {
    $(this).css('background','red');
  }
  if (this.value == 'opel') {
    $(this).css('background','blue');
  }
  if (this.value == 'audi') {
    $(this).css('background','yellow');
  }
});

option {
  background: #fff;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

Answer 3

执行一些jQuery并获得所需的行为。

$("body").on('change', 'select', function(){
            var val = $(this).val();
            if(val == 'volvo'){
                $(this).css("background-color", 'red');
            }
            if(val == 'saab'){
                $(this).css("background-color", 'green');
            }
        })

Answer 4

您可以使用option:checked突出显示所选选项。

:checked伪类最初应用于具有HTML4选择并检查属性

来源：w3.org

option:checked {
  background-color: lightgreen;
}

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>